@layer components {
  /* Flatpickr custom theme to match app design */
  .flatpickr-calendar {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-family: inherit;
    width: 307.875px;
    padding: var(--space-sm);
  }

  .flatpickr-calendar.open {
    z-index: 10000;
  }

  .flatpickr-calendar::before,
  .flatpickr-calendar::after {
    display: none;
  }

  .flatpickr-months {
    padding: var(--space-xs) 0;
  }

  .flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--color-text);
    fill: var(--color-text);
    height: 34px;
  }

  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    color: var(--color-text-muted);
    fill: var(--color-text-muted);
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-months .flatpickr-next-month:hover {
    background: var(--color-bg-muted);
    color: var(--color-text);
    fill: var(--color-text);
  }

  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
  }

  .flatpickr-current-month {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    padding-top: 0;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    border: none;
    font-weight: 600;
    color: var(--color-text);
    appearance: none;
    padding-right: var(--space-sm);
  }

  .flatpickr-current-month input.cur-year {
    background: transparent;
    color: var(--color-text);
    font-weight: 600;
  }

  .flatpickr-current-month .numInputWrapper:hover {
    background: transparent;
  }

  .flatpickr-weekdays {
    background: transparent;
    padding: var(--space-xs) 0;
  }

  .flatpickr-weekday {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  .flatpickr-days {
    width: 100%;
  }

  .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .flatpickr-day {
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: 400;
    max-width: 39px;
    height: 39px;
    line-height: 39px;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .flatpickr-day:hover {
    background: var(--color-bg-muted);
    border: none;
  }

  .flatpickr-day.today {
    border: 1px solid var(--color-primary);
    background: transparent;
  }

  .flatpickr-day.today:hover {
    background: var(--color-primary-subtle);
    border-color: var(--color-primary);
  }

  .flatpickr-day.selected,
  .flatpickr-day.selected:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
  }

  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    color: var(--color-text-muted);
  }

  .flatpickr-day.prevMonthDay:hover,
  .flatpickr-day.nextMonthDay:hover {
    background: var(--color-bg-muted);
  }

  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled:hover {
    color: var(--color-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
  }

  /* Mobile optimization */
  @media (max-width: 500px) {
    .flatpickr-calendar {
      width: calc(100vw - var(--space-lg) * 2);
      max-width: 320px;
    }

    .flatpickr-day {
      max-width: 14.28%;
      height: 44px;
      line-height: 44px;
    }
  }

  /* Alt input styling - inherits from .form__input */
  .flatpickr-input.form__input {
    background-color: var(--color-bg-elevated);
  }

  /* Hide the actual hidden input */
  .flatpickr-input[type="hidden"] + .form__input {
    display: block;
  }
}