/*
  Flatpickr theme — ITTISAL tokens (maroon accent, shell surfaces).
  Loaded after vendor/flatpickr.min.css
*/

.flatpickr-calendar {
  background: var(--bg-popover);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-popover-lg);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  width: 308px;
  padding: 0;
  overflow: hidden;
  animation: none;
  /* Fixed + JS left/top keeps alignment correct inside transformed drawers. */
  position: fixed !important;
  z-index: 300 !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

.flatpickr-calendar.hasTime {
  /* Keep fixed width so days stay in a 7-column week grid.
     width:auto let ~40px day cells wrap to 10-per-row. */
  width: 308px;
  max-width: min(308px, calc(100vw - 24px));
}

.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid var(--border);
  max-height: none;
  height: auto;
  line-height: 1;
}

.flatpickr-months {
  padding: 10px 10px 4px;
  align-items: center;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--text);
  height: 36px;
  overflow: visible;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 600;
  padding-top: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-sm);
  padding: 4px 6px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
  background: var(--hover);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--text-muted);
  color: var(--text-muted);
  padding: 8px;
  border-radius: var(--r-sm);
  height: 36px;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--hover);
  fill: var(--text);
  color: var(--text);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-innerContainer {
  border: 0;
}

.flatpickr-rContainer {
	width: 100%;
  display: flex;
  flex-direction: column;
}

.flatpickr-weekdays {
  background: transparent;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Flatpickr wraps labels in .flatpickr-weekdaycontainer — must be a flex row
   so each span.flatpickr-weekday can take an equal 1/7 share. */
.flatpickr-weekdaycontainer {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  align-items: center;
}

span.flatpickr-weekday {
  display: block !important;
  flex: 1 1 0 !important;
  width: 14.285714% !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.flatpickr-days {
  width: 100%;
  border: 0;
  padding: 0 8px 8px;
  box-sizing: border-box;
}

.dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  justify-content: stretch;
}

.flatpickr-day {
  color: var(--text);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  width: 100%;
  max-width: none;
  height: 36px;
  line-height: 34px;
  margin: 1px 0;
  font-weight: 500;
  box-sizing: border-box;
  justify-self: stretch;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--hover);
  border-color: transparent;
  color: var(--text);
}

.flatpickr-day.today {
  border-color: var(--border);
  background: transparent;
  color: var(--text);
}

.flatpickr-day.today:hover {
  background: var(--hover);
  border-color: var(--border);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  box-shadow: none;
}

.flatpickr-day.inRange {
  background: var(--accent-muted);
  border-color: transparent;
  box-shadow: none;
  color: var(--text);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-faint);
}

.flatpickr-day.week.selected {
  border-radius: var(--r-sm);
}

.flatpickr-time {
  background: transparent;
  padding: 8px 12px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.flatpickr-time input {
  background: var(--bg-prompt);
  border: 1px solid var(--input);
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  box-shadow: none;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: var(--bg-prompt);
  border-color: var(--ring);
  box-shadow: var(--shadow-focus);
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text);
  font-weight: 600;
}

.flatpickr-time .flatpickr-am-pm {
  border: 1px solid var(--input);
  border-radius: var(--r-sm);
  background: var(--bg-prompt);
  height: 36px;
  line-height: 34px;
  width: 44px;
}

.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--hover);
  border-color: var(--ring);
}

.numInputWrapper span {
  border: 0;
  opacity: 0.55;
}

.numInputWrapper span:hover {
  background: var(--hover);
  opacity: 1;
}

.numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--text-muted);
}

.numInputWrapper span.arrowDown:after {
  border-top-color: var(--text-muted);
}

/* Footer: Clear · Today · Done */
.flatpickr-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-popover);
}

.flatpickr-footer__spacer {
  flex: 1;
}

.flatpickr-footer__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--motion-interactive);
}

.flatpickr-footer__btn:hover {
  background: var(--accent-muted);
}

.flatpickr-footer__btn--primary {
  background: var(--accent);
  color: var(--text-inverse);
  padding: 6px 14px;
}

.flatpickr-footer__btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-inverse);
}

.flatpickr-footer__btn--muted {
  color: var(--text-muted);
  font-weight: 500;
}

.flatpickr-footer__btn--muted:hover {
  background: var(--hover);
  color: var(--text);
}

/* Enhanced inputs keep project field look */
input.has-flatpickr {
  cursor: pointer;
}