/* Improved styles for Flatpickr in dark mode */

/* Main calendar background and text */
.flatpickr-calendar {
    background: #2b2b2b;
    border: 1px solid #444;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: #f4f4f4;
    width: 307px !important; /* Ensure calendar has proper width */
  }
  
  /* Month navigation and current month/year display */
  .flatpickr-months {
    background: #2b2b2b;
  }
  
  .flatpickr-month {
    background: #2b2b2b;
    color: #f4f4f4;
  }
  
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    color: #f4f4f4 !important;
    background: #2b2b2b;
  }
  
  .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
  .flatpickr-current-month input.cur-year:hover,
  .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
  .flatpickr-current-month input.cur-year:focus {
    background: #444;
  }
  
  .flatpickr-monthDropdown-month {
    background: #2b2b2b;
    color: #f4f4f4;
  }
  
  /* Month dropdown options */
  .flatpickr-monthDropdown-months option {
    background: #2b2b2b;
    color: #f4f4f4;
  }
  
  /* Navigation arrows */
  .flatpickr-prev-month,
  .flatpickr-next-month {
    color: #f4f4f4 !important;
    fill: #f4f4f4 !important;
  }
  
  .flatpickr-prev-month svg,
  .flatpickr-next-month svg {
    fill: #f4f4f4 !important;
  }
  
  .flatpickr-prev-month:hover svg,
  .flatpickr-next-month:hover svg {
    fill: #66e0ff !important;
  }
  
  /* Weekday headers */
  .flatpickr-weekdays {
    background: #2b2b2b;
  }
  
  .flatpickr-weekday {
    color: #f4f4f4 !important;
    font-weight: bold;
  }
  
  /* Calendar days */
  .flatpickr-day {
    color: #f4f4f4;
    border-color: #444;
  }
  
  
  .flatpickr-days {
    width: 307px !important; /* Ensure days container has proper width */
  }
  
  .dayContainer {
    min-width: 307px !important; /* Ensure days container has proper width */
    max-width: 307px !important;
  }
  
  .flatpickr-day.disabled,
  .flatpickr-day.disabled:hover,
  .flatpickr-day.notAllowed,
  .flatpickr-day.notAllowed.prevMonthDay,
  .flatpickr-day.notAllowed.nextMonthDay {
    color: #777;
  }
  
  /* Ensure prev/next month days are ALWAYS visible */
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    color: #999 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  .flatpickr-day.inRange,
  .flatpickr-day.prevMonthDay.inRange,
  .flatpickr-day.nextMonthDay.inRange,
  .flatpickr-day.today.inRange,
  .flatpickr-day.prevMonthDay.today.inRange,
  .flatpickr-day.nextMonthDay.today.inRange,
  .flatpickr-day:hover,
  .flatpickr-day.prevMonthDay:hover,
  .flatpickr-day.nextMonthDay:hover,
  .flatpickr-day:focus,
  .flatpickr-day.prevMonthDay:focus,
  .flatpickr-day.nextMonthDay:focus {
    background: #444;
    border-color: #444;
    color: #f4f4f4;
  }
  
  /* Selected day styling */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background: #66e0ff;
    border-color: #66e0ff;
    color: #000;
  }
  
  /* Time picker section */
  .flatpickr-time {
    background: #2b2b2b;
    border-top: 1px solid #444;
    max-height: 40px;
    line-height: 40px;
  }
  
  .flatpickr-time input,
  .flatpickr-time .flatpickr-am-pm,
  .flatpickr-time .flatpickr-minute,
  .flatpickr-time .flatpickr-hour {
    background: #2b2b2b;
    color: #f4f4f4;
    height: 40px;
    line-height: 40px;
  }
  
  .flatpickr-time input:hover,
  .flatpickr-time .flatpickr-am-pm:hover,
  .flatpickr-time input:focus,
  .flatpickr-time .flatpickr-am-pm:focus {
    background: #444;
  }
  
  .flatpickr-time .numInputWrapper span.arrowUp:after,
  .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-color: #f4f4f4 transparent transparent;
  }
  
  .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-color: transparent transparent #f4f4f4;
  }
  
  /* Fix calendar display issues */
  .flatpickr-calendar.animate.open {
    visibility: visible;
    display: inline-block !important;
    z-index: 99999 !important;
  }
  
  /* Input styling - CRITICAL for consistent field width */
  #datetimePicker {
    width: 100% !important;
    padding: 0.75rem !important;
    background-color: #2b2b2b !important;
    color: white !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important; /* Ensure padding doesn't affect width */
    margin-bottom: 0 !important;
    height: auto !important;
  }
  
  /* Fix the width of all form inputs to be consistent - IMPORTANT */
  #schedulerForm input[type="text"],
  #schedulerForm input[type="email"],
  #schedulerForm textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    margin-bottom: 0 !important;
    height: auto !important; /* Ensure height isn't overridden */
  }
  
  /* Fix the spacing between form elements */
  #schedulerForm br {
    display: block !important;
    content: "" !important;
    margin-top: 1rem !important;
  }
  
  /* Make month/year selector more visible */
  .flatpickr-current-month {
    padding: 7px 0 0 0;
    line-height: 1;
    font-weight: bold;
    color: #f4f4f4;
  }
  
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    font-weight: bold;
    font-size: 1.1em;
  }
  
  
  /* Fix for disabled dates visibility */
  .flatpickr-day.flatpickr-disabled {
    color: #666 !important; /* Lighter gray but still visible */
    opacity: 0.7 !important;
    display: inline-block !important;
    visibility: visible !important;
    pointer-events: none !important; /* Keep them non-selectable */
    text-decoration: line-through !important; /* Add a strike-through to indicate unavailability */
  }
  
  /* Special handling for today's date if it's disabled */
  .flatpickr-day.today.flatpickr-disabled {
    color: #888 !important;
    border-color: #555 !important;
    opacity: 0.8 !important;
  }
  
  /* Fix for disabled but weekday dates */
  .flatpickr-day.flatpickr-disabled:not(.prevMonthDay):not(.nextMonthDay) {
    color: #777 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
  }
  
  
  /* Fix for the flatpickr wrapper width issue */
  .flatpickr-wrapper {
    width: 100% !important;
    display: block !important;
    max-width: none !important;
  }
  
  /* Ensure any inline styles are overridden */
  .flatpickr-input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }
  
  /* Ensure the input itself also maintains full width */
  #schedulerForm #datetimePicker.flatpickr-input {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }