/* Blitz date picker — the look of the flatpickr calendar rendered by
   ComponentHelper#date_picker_field_tag / BlitzFormBuilder#date_picker.

   _flatpickr.css holds the library's own stylesheet, vendored verbatim and
   loaded first; everything here dresses it in blitz's form tokens and makes
   it noticeably more compact than flatpickr's fixed 307.875px default — the
   library's size does not fit a phone dialog.

   Every rule is scoped to `.blitz-date-picker`, the wrapper the helper
   renders: the picker always runs in flatpickr's `static` mode (the calendar
   lives inside that wrapper), so nothing here can leak onto a page that uses
   flatpickr on its own.

   Host apps re-theme through the tokens below; `--color-primary` alone
   already colours the selected day and today's ring. */

@layer components {
  :root {
    --date-picker-width: 18rem;
    --date-picker-day-size: 2.25rem;

    --date-picker-background: var(--form-background-color, #fff);
    --date-picker-color: var(--form-color, #111827);
    --date-picker-muted-color: var(--form-hint-color, #6b7280);
    --date-picker-disabled-color: var(--form-disabled-color, #9ca3af);
    --date-picker-hover-background: var(--light-gray, #f4f4f4);
    --date-picker-selected-background: var(--color-primary);
    --date-picker-selected-color: #fff;
    --date-picker-today-border-color: var(--color-primary);
    --date-picker-radius: 10px;
    --date-picker-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.45);
  }

  /* The wrapper is the calendar's anchor: flatpickr's own wrapper gives up
     its `position: relative` so the calendar hangs from the field itself.
     (Where that would run off the screen edge, the controller nudges it
     back with a transform — see keepInViewport.) */
  .blitz-date-picker {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
  }

  .blitz-date-picker .flatpickr-wrapper {
    position: static;
    display: flex;
    min-width: 0;
    max-width: 100%;
  }

  .blitz-date-picker .flatpickr-calendar {
    width: var(--date-picker-width);
    max-width: calc(100vw - 1rem);
    background: var(--date-picker-background);
    border-radius: var(--date-picker-radius);
    box-shadow: var(--date-picker-shadow);
    font-family: inherit;
  }

  .blitz-date-picker .flatpickr-calendar.static {
    left: 0;
  }

  /* flatpickr hard-codes 307.875px down the whole chain. Let every level
     take the calendar's width instead, so --date-picker-width is the one
     place that decides how big the picker is. */
  .blitz-date-picker .flatpickr-innerContainer,
  .blitz-date-picker .flatpickr-rContainer,
  .blitz-date-picker .flatpickr-days,
  .blitz-date-picker .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .blitz-date-picker .flatpickr-day {
    max-width: none;
    height: var(--date-picker-day-size);
    line-height: var(--date-picker-day-size);
    color: var(--date-picker-color);
  }

  /* ---- Header: month, year, the two arrows ---- */

  .blitz-date-picker .flatpickr-months .flatpickr-month,
  .blitz-date-picker .flatpickr-current-month {
    height: 2.4rem;
  }

  .blitz-date-picker .flatpickr-current-month {
    padding-top: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    /* Month name and year belong on one line; the header clips its
       overflow, so a wrap cuts the year in half. */
    white-space: nowrap;
  }

  .blitz-date-picker .flatpickr-months .flatpickr-prev-month,
  .blitz-date-picker .flatpickr-months .flatpickr-next-month {
    height: 2.4rem;
    padding: 0.65rem 0.5rem;
    color: var(--date-picker-muted-color);
    fill: var(--date-picker-muted-color);
  }

  .blitz-date-picker .flatpickr-months .flatpickr-prev-month:hover svg,
  .blitz-date-picker .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-primary);
  }

  /* blitz dresses every input and select as a form control (form.css, a
     zero-specificity `:where(…)` rule). flatpickr undoes all of it except
     `display` on the month <select>, which it never declares — and a
     block-level month name pushes the year onto a second line. The shadow
     it never declares either, which would draw a ghost box around both. */
  .blitz-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block;
  }

  .blitz-date-picker .flatpickr-calendar input,
  .blitz-date-picker .flatpickr-calendar select {
    box-shadow: none;
  }

  .blitz-date-picker .flatpickr-months .flatpickr-month,
  .blitz-date-picker .flatpickr-current-month input.cur-year,
  .blitz-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--date-picker-color);
    fill: var(--date-picker-color);
  }

  /* ---- Weekday row and days ---- */

  .blitz-date-picker .flatpickr-weekdays {
    height: 1.75rem;
  }

  .blitz-date-picker span.flatpickr-weekday {
    color: var(--date-picker-muted-color);
    font-weight: 600;
  }

  .blitz-date-picker .flatpickr-day:hover,
  .blitz-date-picker .flatpickr-day:focus,
  .blitz-date-picker .flatpickr-day.prevMonthDay:hover,
  .blitz-date-picker .flatpickr-day.nextMonthDay:hover {
    background: var(--date-picker-hover-background);
    border-color: var(--date-picker-hover-background);
  }

  .blitz-date-picker .flatpickr-day.today {
    border-color: var(--date-picker-today-border-color);
  }

  .blitz-date-picker .flatpickr-day.today:hover,
  .blitz-date-picker .flatpickr-day.today:focus {
    background: var(--date-picker-hover-background);
    border-color: var(--date-picker-today-border-color);
    color: var(--date-picker-color);
  }

  .blitz-date-picker .flatpickr-day.selected,
  .blitz-date-picker .flatpickr-day.selected:hover,
  .blitz-date-picker .flatpickr-day.selected:focus,
  .blitz-date-picker .flatpickr-day.selected.today {
    background: var(--date-picker-selected-background);
    border-color: var(--date-picker-selected-background);
    color: var(--date-picker-selected-color);
  }

  .blitz-date-picker .flatpickr-day.flatpickr-disabled,
  .blitz-date-picker .flatpickr-day.flatpickr-disabled:hover,
  .blitz-date-picker .flatpickr-day.prevMonthDay,
  .blitz-date-picker .flatpickr-day.nextMonthDay {
    color: var(--date-picker-disabled-color);
  }

  /* The pointer to the field takes the calendar's own surface. */
  .blitz-date-picker .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--date-picker-background);
  }

  .blitz-date-picker .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--date-picker-background);
  }
}