/* ===========================================================================
   RSS date-range picker — shared flatpickr styling
   ===========================================================================
   One stylesheet for every customer page that filters by date, so the calendar
   is identical on Invoices & Statements, Make a Payment, Payment History,
   Purchase History and the Account Ledger. Previously each page carried its own
   copy; a fix to one silently left the others behind.

   Pair it with js/rss-date-range.js, which builds the year dropdown these rules
   are written for. The CSS alone renders a stock flatpickr header.

   Sizing and the range palette follow admin's DateRangePicker
   (admin-server/public/plugins/js/dateRangePicker.js) so the two apps read the
   same: a solid #086CAA circle on each end of the range and a pale band across
   the days between.

   The grid width must be set on .flatpickr-rContainer, .flatpickr-days AND
   .dayContainer together — flatpickr hard-codes matching pixel widths on all
   three, so overriding only one leaves the grid clipped or overflowing. The
   calendar itself is wider to carry its padding.
   =========================================================================== */

.flatpickr-calendar {
  font-family: inherit;
  font-size: 11.5px;
  width: 214px !important;
  padding: 8px 9px 8px;
  border: 1.5px solid #dce3e8;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* The little caret that points back at the input — the card reads cleaner
   without it. */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar .flatpickr-days {
  width: 196px !important;
}
.flatpickr-calendar .dayContainer {
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
}

/* --- Header: two pill dropdowns, no arrows (the dropdowns navigate) --- */
.flatpickr-calendar .flatpickr-months {
  padding: 0 0 6px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  display: none;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  height: auto;
  overflow: visible;
  background: transparent;
}
.flatpickr-calendar .flatpickr-current-month {
  position: static;
  display: flex;
  gap: 8px;
  width: 100%;
  left: 0;
  height: auto;
  padding: 0;
  font-size: 12.5px;
  transform: none;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .rss-year-select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0 20px 0 8px;
  border: none;
  border-radius: 9px;
  background-color: #f2f4f7;
  color: #1f2937;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5563' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 8px 5px;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .rss-year-select:hover {
  background-color: #e8ebef;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar .rss-year-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(8, 108, 170, 0.15);
}
/* Replaced by .rss-year-select, which is a real dropdown rather than
   flatpickr's number input with spinner arrows. */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  display: none;
}

/* --- Weekday row --- */
.flatpickr-calendar .flatpickr-weekdays {
  height: 18px;
  background: transparent;
}
/* Labels are two letters (set via the locale in the picker config), not
   "SUN"/"WED". Chrome's "minimum font size" setting clamps any text below it —
   a machine set to 12px renders this row at 12px no matter what CSS asks for,
   and three uppercase letters then wrap inside a 28px column. CSS cannot
   override that setting, so the row has to fit at the clamped size instead.
   nowrap is the backstop: overflow beats wrapping into a second line. */
.flatpickr-calendar span.flatpickr-weekday {
  background: transparent;
  color: #1D1F22;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* --- Day grid ---
   Each cell MUST stay exactly one seventh of the grid, or flex-wrap fits a
   different number of days per row and the dates slide out of line with the
   SU–SA header (a 26px cell in a 236px grid wrapped nine per row). So the cell
   keeps its full 1/7 width and the 24px circle is drawn as a centred ::after
   instead of being the cell's own background.

   Cells therefore sit edge to edge, which is what lets the range band
   (::before) run unbroken across a week with no gaps to bridge. Painting order
   inside the day: ::before (band) → ::after (circle) → the number itself. */
.flatpickr-calendar .flatpickr-day {
  position: relative;
  flex-basis: 14.2857143%;
  width: 14.2857143%;
  max-width: 14.2857143%;
  height: 26px;
  line-height: 26px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: #1a2b3c;
  box-shadow: none;
}
.flatpickr-calendar .flatpickr-day::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  z-index: -1;
}
.flatpickr-calendar .flatpickr-day:hover::after {
  background: #e8f0f5;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: #c0c8d0;
}
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: #d2d8de;
}
.flatpickr-calendar .flatpickr-day.today {
  color: #086CAA;
  font-weight: 700;
}
.flatpickr-calendar .flatpickr-day.today::after {
  background: #e8f0f5;
}

/* The pale band across the days between the two ends. flatpickr has no cell
   wrapper to hang admin's band on, so it is a ::before on the day itself,
   inset to the circle's height so band and circles line up. Every in-range day
   is kept transparent so the band shows through unbroken — including days
   spilling in from the neighbouring months, and today, whose highlight would
   otherwise interrupt it. */
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.today.inRange,
.flatpickr-calendar .flatpickr-day.today.inRange:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.today.inRange {
  background: transparent;
  border-color: transparent;
  color: #086CAA;
  box-shadow: none;
}
.flatpickr-calendar .flatpickr-day.inRange::after,
.flatpickr-calendar .flatpickr-day.today.inRange::after {
  background: transparent;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange {
  /* Still readable as an out-of-month day, just inside the range. */
  color: #7FAECB;
}
.flatpickr-calendar .flatpickr-day.inRange::before,
.flatpickr-calendar .flatpickr-day.startRange:not(.endRange)::before,
.flatpickr-calendar .flatpickr-day.endRange:not(.startRange)::before {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  right: 0;
  background: #e5f2ff;
  z-index: -1;
}
/* The endpoints only carry the band on their inward side. */
.flatpickr-calendar .flatpickr-day.startRange:not(.endRange)::before {
  left: 50%;
}
.flatpickr-calendar .flatpickr-day.endRange:not(.startRange)::before {
  right: 50%;
}
/* Rounded caps wherever a week begins or ends — now that rows really are seven
   days, 7n+1 is Sunday and 7n is Saturday. */
.flatpickr-calendar .flatpickr-day:nth-child(7n + 1)::before {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.flatpickr-calendar .flatpickr-day:nth-child(7n)::before {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* Both ends of the range get the identical solid circle. */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  background: transparent;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.flatpickr-calendar .flatpickr-day.selected::after,
.flatpickr-calendar .flatpickr-day.selected:hover::after,
.flatpickr-calendar .flatpickr-day.startRange::after,
.flatpickr-calendar .flatpickr-day.startRange:hover::after,
.flatpickr-calendar .flatpickr-day.endRange::after,
.flatpickr-calendar .flatpickr-day.endRange:hover::after {
  background: #086CAA;
}

/* ---------------------------------------------------------------------------
   The input itself
   --------------------------------------------------------------------------- */
.rss-date-input {
  cursor: pointer;
  color: #1f2937;
  background-color: #fff;
}
.rss-date-input::placeholder {
  color: #9ca3af;
}
/* readonly inputs go grey in some themes — this one is chosen from, not
   disabled, so it keeps a normal background and pointer. */
.rss-date-input[readonly] {
  background-color: #fff;
  opacity: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------------
   Below 576px the calendar grows so the days are comfortable to tap. What it
   must NOT do is leave the flow: an earlier version centred it in the viewport
   with position:fixed, which pinned the card to the screen so it slid along over
   the rows as the page scrolled instead of staying with the field. flatpickr's
   own absolute positioning is anchored to the input and scrolls with it, so the
   only job here is sizing — the picker config pins it below the field, and
   flatpickr keeps it clear of the right edge on its own. */
@media (max-width: 575.98px) {
  /* The calendar is SMALLER on a phone than on a desktop, not larger.
     An earlier version grew it to 264px with 32px day cells, reasoning that a
     thumb needs a bigger target than a mouse pointer. On a real phone that card
     covered most of the screen and hid the very rows being filtered, so it now
     shrinks instead: 200px across and about 210px tall, against 214x250 on a
     desktop. Day cells stay at 24px, which is still comfortably tappable.

     Every size below is derived from the 26px cell: 7 cells make the 182px grid,
     and the calendar adds its own padding on top. Changing one number without
     the others leaves the day grid out of line with the SU–SA header, because
     flatpickr wraps cells by width rather than by column count. */
  .flatpickr-calendar.open {
    width: 200px !important;
    padding: 8px 9px;
  }
  /* All three, or flatpickr's hard-coded widths leave the grid clipped. */
  .flatpickr-calendar.open .flatpickr-rContainer,
  .flatpickr-calendar.open .flatpickr-weekdaycontainer,
  .flatpickr-calendar.open .flatpickr-days,
  .flatpickr-calendar.open .dayContainer {
    width: 182px !important;
    min-width: 182px !important;
    max-width: 182px !important;
  }
  .flatpickr-calendar.open .flatpickr-day {
    height: 24px;
    line-height: 24px;
    font-size: 10.5px;
  }
  /* The selection circle, inset inside the 26px cell. */
  .flatpickr-calendar.open .flatpickr-day::after {
    width: 22px;
    height: 22px;
  }
  .flatpickr-calendar.open .flatpickr-months {
    padding: 0 0 4px;
  }
  .flatpickr-calendar.open .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-calendar.open .rss-year-select {
    height: 26px;
    font-size: 11px;
    line-height: 26px;
  }
  .flatpickr-calendar.open .flatpickr-weekdays {
    height: 16px;
  }
  .flatpickr-calendar.open span.flatpickr-weekday {
    font-size: 9.5px;
  }
  /* Full width on its own row rather than squeezed beside the other filters. */
  .rss-date-input {
    width: 100%;
  }
}