label.kt-form-label.kt-required::after {
  content: "*";
  color: red;
  font-weight: bold;
}

/* Ensure date picker popup appears above modal backdrop */
[data-vc=calendar][data-vc-input] {
  z-index: 9999;
}

/* ── Flatpickr – design-system theme (light + dark) ──────────────────── */
.flatpickr-calendar,
.flatpickr-calendar.open,
.flatpickr-innerContainer,
.flatpickr-rContainer {
  font-family: Inter, sans-serif;
  font-size: var(--text-sm);
  background: var(--background) !important;
  color: var(--foreground);
}

.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: var(--text-sm) !important;
}

span.flatpickr-weekday {
  font-size: var(--text-xs) !important;
}

.flatpickr-day {
  font-size: var(--text-xs) !important;
  line-height: 2rem;
  height: 2rem;
}

.flatpickr-calendar {
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border) !important; }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--background) !important; }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--border) !important; }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--background) !important; }

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
  background: var(--background) !important;
  color: var(--foreground) !important;
  fill: var(--foreground) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--background);
  color: var(--foreground);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--muted-foreground) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--foreground) !important;
}

.flatpickr-weekdays,
.flatpickr-weekwrapper .flatpickr-weekday,
span.flatpickr-weekday {
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
  font-weight: 600;
}

.flatpickr-days,
.dayContainer {
  background: var(--background) !important;
  border-color: var(--border) !important;
}

.flatpickr-day {
  color: var(--foreground);
  border-color: transparent;
  border-radius: 0.375rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--muted) !important;
  border-color: var(--muted) !important;
  color: var(--foreground);
}
.flatpickr-day.today {
  border-color: var(--primary) !important;
}
.flatpickr-day.today:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--muted-foreground) !important;
  opacity: 0.4;
}

.numInputWrapper span {
  border-color: var(--border) !important;
}
.numInputWrapper span svg path {
  fill: var(--muted-foreground) !important;
}
.numInputWrapper:hover {
  background: var(--muted) !important;
}

.dark .flatpickr-calendar {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ── Flatpickr time picker ───────────────────────────────────────────── */
.flatpickr-time {
  background: var(--background) !important;
  border-top: 1px solid var(--border) !important;
  font-family: Inter, sans-serif;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: Inter, sans-serif;
  font-size: var(--text-sm) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--muted) !important;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  font-weight: 500;
}