/* ════════════════════════════════════════════════════════════════════
   Flatpickr — project theme integration (light defaults + dark scope)
   Loaded AFTER flatpickr.min.css so these rules win.
   ════════════════════════════════════════════════════════════════════ */

/* Make the input the picker is bound to look like a normal form-control */
.flatpickr-input[readonly] { background-color: var(--c-surface, #fff); cursor: pointer; }

/* Align calendar with project surface tokens (light) */
.flatpickr-calendar {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: var(--c-text, #1f2937);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-color: transparent; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
  color: var(--c-text, #1f2937);
  background: transparent;
  fill: var(--c-text, #1f2937);
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--c-surface, #fff);
  color: var(--c-text, #1f2937);
}
.flatpickr-prev-month, .flatpickr-next-month { color: var(--c-text, #1f2937); opacity: 0.85; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: currentColor; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { opacity: 1; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--c-primary, #fbb800); }

.flatpickr-day {
  color: var(--c-text, #1f2937);
  background: transparent;
  border-color: transparent;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--c-surface-alt, #f3f4f6);
  border-color: var(--c-border, #e5e7eb);
  color: var(--c-text, #1f2937);
}
.flatpickr-day.today { border-color: var(--c-primary, #fbb800); }
.flatpickr-day.today:hover { background: var(--c-primary, #fbb800); color: #1f2937; border-color: var(--c-primary, #fbb800); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--c-primary, #fbb800);
  border-color: var(--c-primary, #fbb800);
  color: #1f2937;
  font-weight: 700;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--c-text-muted, #9ca3af); opacity: 0.5; }

/* Time row */
.flatpickr-time { border-top: 1px solid var(--c-border, #e5e7eb); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--c-text, #1f2937);
  background: transparent;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--c-surface-alt, #f3f4f6);
}
.flatpickr-time .numInputWrapper span.arrowUp::after  { border-bottom-color: var(--c-text, #1f2937); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color:    var(--c-text, #1f2937); }

/* ───── Dark mode overrides ───── */
html[data-theme="dark"] .flatpickr-calendar {
  background: var(--c-surface, #1f2433);
  border-color: var(--c-border, #2c3344);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: var(--c-text, #e5e7eb);
}
html[data-theme="dark"] .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-next-month { color: #e5e7eb; }
html[data-theme="dark"] .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-next-month svg { fill: #e5e7eb; }
html[data-theme="dark"] .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--c-primary, #fbb800); }
html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day.prevMonthDay:hover,
html[data-theme="dark"] .flatpickr-day.nextMonthDay:hover {
  background: var(--c-surface-alt, #2a3042);
  border-color: var(--c-border, #3a4255);
}
html[data-theme="dark"] .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--c-surface, #1f2433);
  color: var(--c-text, #e5e7eb);
}
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay { color: #6b7280; }
html[data-theme="dark"] .flatpickr-time { border-top-color: var(--c-border, #2c3344); }
html[data-theme="dark"] .flatpickr-time input:hover,
html[data-theme="dark"] .flatpickr-time input:focus,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--c-surface-alt, #2a3042);
}