/* CloseFlow ds-datetime theme (backlog #12).
   Re-skins the vendored flatpickr calendar (static/js/vendor/flatpickr.min.css,
   loaded first) to Atlas tokens so the date/time picker matches the app instead
   of flatpickr's default blue. All colors reference --* tokens, so light/dark
   mode follow the app's token switch automatically. */

.flatpickr-calendar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px -12px rgba(31, 31, 31, .28);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months, .flatpickr-month { background: transparent; color: var(--text); }
.flatpickr-current-month, .flatpickr-current-month input.cur-year { color: var(--text); font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text); font-weight: 600; }
.flatpickr-weekday { color: var(--muted); font-weight: 600; }
.flatpickr-weekdays { background: transparent; }

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

.flatpickr-day {
  color: var(--text);
  border-radius: var(--radius-md);
  border-color: transparent;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--text); }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.today:hover { background: var(--accent); border-color: var(--accent); color: var(--cf-on-accent); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cf-on-accent);
}
.flatpickr-day.inRange { background: var(--accent-tint); border-color: var(--accent-tint); box-shadow: -5px 0 0 var(--accent-tint), 5px 0 0 var(--accent-tint); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-disabled); }

/* Time picker (mode=time / datetime) */
.flatpickr-time { border-top: 1px solid var(--border-subtle); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--text); }
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--surface-sunken); }
.flatpickr-time .numInputWrapper span.arrowUp:hover:after { border-bottom-color: var(--accent); }
.flatpickr-time .numInputWrapper span.arrowDown:hover:after { border-top-color: var(--accent); }
.numInputWrapper:hover { background: var(--surface-sunken); }

/* The friendly altInput reads like the app's other .form-control inputs; it
   inherits their styling because ds_datetime keeps the same wrapper/classes. */
input.flatpickr-input.form-control[readonly] { background: var(--card); cursor: pointer; }