/* Import base Flatpickr styles from CDN */
@import url('https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css');

/* EPYC Design System Theme for Flatpickr */
/* Using design tokens from config/design-tokens.js */

/* Calendar container */
.flatpickr-calendar {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm equivalent */
  border-radius: 6px; /* rounded-md */
  border: 1px solid #D8D8D8; /* gray-200 */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #FFFFFF; /* white */
}

/* Month navigation */
.flatpickr-months {
  background-color: #5E95C4; /* primary-500 / blue-500 */
  border-radius: 6px 6px 0 0; /* rounded-md top only */
  padding: 12px 16px; /* p-3 p-4 equivalent */
}

.flatpickr-month {
  color: #FFFFFF; /* white */
}

.flatpickr-current-month {
  color: #FFFFFF; /* white */
  font-size: 14px; /* text-sm */
  font-weight: 600; /* font-semibold */
}

.flatpickr-current-month input.cur-year {
  color: #FFFFFF; /* white */
  font-weight: 600; /* font-semibold */
}

/* Month dropdown selector */
.flatpickr-monthDropdown-months {
  background-color: #FFFFFF; /* white */
  border: 1px solid #D8D8D8; /* gray-200 */
  border-radius: 6px; /* rounded-md */
  color: #454545; /* gray-700 / text-primary */
  font-size: 14px; /* text-sm */
  padding: 4px 8px;
  font-weight: 500; /* font-medium */
}

.flatpickr-monthDropdown-months:hover {
  background-color: #F5F5F5; /* gray-100 */
}

.flatpickr-monthDropdown-months:focus {
  outline: none;
  border-color: #5E95C4; /* primary-500 / blue-500 */
  box-shadow: 0 0 0 1px #5E95C4; /* focus ring */
}

/* Month dropdown options */
.flatpickr-monthDropdown-months option {
  background-color: #FFFFFF; /* white */
  color: #454545; /* gray-700 / text-primary */
  padding: 8px;
}

/* Year input in month selector */
.flatpickr-current-month .numInputWrapper {
  width: 7ch;
}

.flatpickr-current-month .numInputWrapper input {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF; /* white */
  font-weight: 600; /* font-semibold */
  border-radius: 4px;
  padding: 2px 4px;
}

.flatpickr-current-month .numInputWrapper input:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.flatpickr-current-month .numInputWrapper input:focus {
  background-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #FFFFFF; /* white */
  fill: #FFFFFF; /* white */
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: rgba(255, 255, 255, 0.8);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: rgba(255, 255, 255, 0.8);
}

/* Weekday labels */
.flatpickr-weekday {
  color: #808080; /* gray-500 */
  font-weight: 500; /* font-medium */
  font-size: 12px; /* text-xs */
}

/* Day cells */
.flatpickr-day {
  border-radius: 6px; /* rounded-md */
  color: #454545; /* gray-700 / text-primary */
  font-size: 14px; /* text-sm */
  transition: all 0.2s ease;
}

.flatpickr-day:hover {
  background-color: #EBF2F8; /* primary-100 / blue-100 */
  border-color: #EBF2F8; /* primary-100 / blue-100 */
  color: #2B6291; /* primary-700 / blue-700 */
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: #5E95C4; /* primary-500 / blue-500 */
  border-color: #5E95C4; /* primary-500 / blue-500 */
  color: #FFFFFF; /* white */
  font-weight: 600; /* font-semibold */
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background-color: #367BB5; /* primary-600 / blue-600 */
  border-color: #367BB5; /* primary-600 / blue-600 */
}

/* Today */
.flatpickr-day.today {
  border-color: #5E95C4; /* primary-500 / blue-500 */
  background-color: transparent;
  color: #5E95C4; /* primary-500 / blue-500 */
  font-weight: 600; /* font-semibold */
}

.flatpickr-day.today:hover {
  background-color: #F5F9FC; /* primary-50 / blue-50 */
  border-color: #5E95C4; /* primary-500 / blue-500 */
  color: #2B6291; /* primary-700 / blue-700 */
}

/* In range dates */
.flatpickr-day.inRange {
  background-color: #F5F9FC; /* primary-50 / blue-50 */
  border-color: #D7E5F0; /* primary-200 / blue-200 */
  box-shadow: none;
}

/* Disabled dates */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: #B1B1B1; /* gray-300 */
  cursor: not-allowed;
  background-color: transparent;
}

/* Previous/next month dates */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #B1B1B1; /* gray-300 */
}

/* Alt input (the visible input field) */
.flatpickr-input[readonly] {
  cursor: pointer;
  background-color: #FFFFFF; /* white */
}

/* Time picker (if enabled) */
.flatpickr-time {
  border-top: 1px solid #D8D8D8; /* gray-200 */
}

.flatpickr-time input {
  color: #454545; /* gray-700 / text-primary */
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background-color: #F5F5F5; /* gray-100 */
}

/* Animation */
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 0.2s ease-out;
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure proper z-index */
.flatpickr-calendar {
  z-index: 9999;
}

/* Match input styling from design system */
.flatpickr-input {
  font-size: 14px; /* text-sm */
  color: #454545; /* gray-700 / text-primary */
}

.flatpickr-input::placeholder {
  color: #808080; /* gray-500 / text-light */
}

/* Calendar icon wrapper */
.datepicker-wrapper {
  position: relative;
  display: inline-block;
}

/* Calendar icon */
.datepicker-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #808080; /* gray-500 */
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datepicker-icon:hover {
  color: #5E95C4; /* primary-500 / blue-500 */
}

.datepicker-icon svg {
  width: 100%;
  height: 100%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Custom application styles (non-Tailwind) go here */