@layer components {
  .flatpickr-calendar {
    font-family: var(--font-ui);
    border-radius: var(--r-lg);
    border: 1px solid var(--ink-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .flatpickr-months .flatpickr-month {
    background: var(--forest-700);
    color: #fff;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }

  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
  }

  .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-months .flatpickr-next-month:hover {
    color: var(--forest-200);
    fill: var(--forest-200);
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--forest-700);
    color: #fff;
  }

  .flatpickr-current-month input.cur-year {
    color: #fff;
  }

  span.flatpickr-weekday {
    color: var(--ink-400);
    font-weight: 600;
    font-size: 11px;
  }

  .flatpickr-day {
    color: var(--ink-800);
    border-radius: var(--r-md);
  }

  .flatpickr-day:hover {
    background: var(--forest-50);
    border-color: var(--forest-100);
  }

  .flatpickr-day.selected {
    background: var(--forest-700);
    border-color: var(--forest-700);
    color: #fff;
  }

  .flatpickr-day.selected:hover {
    background: var(--forest-800);
    border-color: var(--forest-800);
  }

  .flatpickr-day.today:not(.selected) {
    border-color: var(--forest-300);
  }

  .flatpickr-time {
    border-top: 1px solid var(--ink-100);
  }

  .flatpickr-time input {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--ink-800);
  }

  .flatpickr-time .flatpickr-time-separator {
    color: var(--ink-400);
  }

  .flatpickr-time .numInputWrapper:hover {
    background: var(--forest-50);
  }

  /* Confirm button */
  .flatpickr-confirm {
    display: block;
    width: 100%;
    padding: 8px;
    border: none;
    border-top: 1px solid #ddd;
    background: #2d5a3d;
    color: #fff;
    font-family: var(--font-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 0 8px 8px;
  }

  .flatpickr-confirm:hover {
    background: #1e4a2e;
  }

  /* Alt input styling */
  .flatpickr-input[readonly] {
    cursor: pointer;
    background: #fff;
  }
}