/* Material Design–inspired Flatpickr theme (SUARA) */

.flatpickr-calendar {
  font-family: inherit;
  border: none;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 8px 24px rgb(0 0 0 / 0.12),
    0 16px 40px rgb(0 0 0 / 0.08);
  background: var(--color-base-100, #fff);
  color: var(--color-base-content, #1e293b);
  width: 328px;
  padding: 8px 4px 12px;
  overflow: hidden;
}

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

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

.flatpickr-months .flatpickr-month {
  height: 40px;
  overflow: visible;
}

.flatpickr-current-month {
  font-size: 0.9375rem;
  font-weight: 600;
  padding-top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-base-content, #1e293b);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 0.9375rem;
  background: transparent;
  border-radius: 8px;
  color: inherit;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 8%, transparent);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: var(--color-base-content, #1e293b);
  top: 4px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 10%, transparent);
}

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

.flatpickr-weekdays {
  height: 36px;
  margin-top: 4px;
}

span.flatpickr-weekday {
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content, #1e293b) 55%, transparent);
  text-transform: none;
}

.flatpickr-days {
  width: 100%;
}

.dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0 8px;
}

.flatpickr-day {
  max-width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  border: none;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-base-content, #1e293b);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 12%, transparent);
  border-color: transparent;
  color: var(--color-base-content, #1e293b);
}

.flatpickr-day.today {
  border: 1.5px solid var(--color-primary, #2563eb);
  background: transparent;
  color: var(--color-primary, #2563eb);
  font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 12%, transparent);
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
}

.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,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary-content, #fff);
  box-shadow: none;
  font-weight: 600;
}

.flatpickr-day.inRange {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 14%, transparent);
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: color-mix(in oklab, var(--color-base-content, #1e293b) 28%, transparent);
}

.flatpickr-day.flatpickr-disabled {
  cursor: not-allowed;
}

.flatpickr-time {
  border-top: 1px solid var(--color-base-300, #e2e8f0);
  max-height: 48px;
  height: 48px;
  margin-top: 4px;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time .flatpickr-am-pm {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-base-content, #1e293b);
  border-radius: 8px;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: color-mix(in oklab, var(--color-primary, #2563eb) 10%, transparent);
}

.flatpickr-time .flatpickr-time-separator {
  color: var(--color-base-content, #1e293b);
  font-weight: 600;
}

/* Input affordance */
input.js-datepicker,
.flatpickr-input.js-datepicker {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  padding-right: 2.25rem !important;
}

input.js-datepicker[data-fp-mode="time"],
.flatpickr-input.js-datepicker[data-fp-mode="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

html.dark .flatpickr-calendar,
html[data-theme="dark"] .flatpickr-calendar {
  background: var(--color-base-100, #1e293b);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.3),
    0 8px 24px rgb(0 0 0 / 0.45);
}

html.dark .flatpickr-time,
html[data-theme="dark"] .flatpickr-time {
  border-top-color: var(--color-base-300, #334155);
}

/* Keep calendar above Bootstrap modals */
.flatpickr-calendar.open {
  z-index: 1100;
}

/* Visible alt inputs should fill their containers */
input.flatpickr-input + input.js-datepicker,
.flatpickr-wrapper {
  width: 100%;
}

.flatpickr-wrapper > input.js-datepicker {
  width: 100%;
}