/* =============================================================================
   FLATPICKR, IN THIS SITE'S COLOURS
   =============================================================================

   The date and time pickers on the create form and the project editor.

   WHY THIS FILE EXISTS
   --------------------
   flatpickr.min.css is vendored and is a LIGHT THEME with the colours written
   into it: `background:#fff` on the popup, `#393939` day numbers,
   `rgba(0,0,0,.54)` weekday initials, `#e6e6e6` hairlines, `#569ff7` for the
   selected day. Not one of them is a variable, so nothing about it moves when
   the browser is set to dark.

   Everything else on the site follows `prefers-color-scheme` through the
   light-dark() tokens in themes/americon-bid/style.css. The picker did not.
   Somebody filling in a bid deadline at night got a white 308px card thrown
   over a dark form -- readable in the strict sense, and still the one surface
   here that ignores the setting the rest of the site respects.

   WHY THE VENDOR FILE IS NOT EDITED
   ---------------------------------
   Same rule as every other library in assets/vendor/: it is replaced wholesale
   when it is upgraded, and an edit inside it is an edit that gets thrown away
   silently at the next bump. These are overrides in a file of our own, loaded
   after it.

   HOW THE CASCADE IS GUARANTEED
   -----------------------------
   Registered in mu-plugins/americon-assets.php with 'flatpickr' as a
   dependency, so WordPress prints the vendor sheet first wherever the pair is
   enqueued. That is what lets the selectors below simply MATCH flatpickr's own
   specificity instead of inflating past it -- a rule that has to win by weight
   is a rule that breaks the next time the library adds a class.

   The selectors are therefore copied from the vendor file verbatim, including
   the ones that look redundant. Dropping `.flatpickr-day.startRange` because
   this site never picks a range would leave that rule at #569ff7 the day
   somebody turns one on.

   Every colour is a token, so this file has no light/dark split of its own --
   light-dark() has already resolved by the time these read it. Fallbacks are
   present for the same reason they are in americon-help.css, and
   tests/test-contrast.php checks each one against the token it stands in for.
   ========================================================================== */


/* --- The popup ------------------------------------------------------------
   The vendor rule sets `background` twice (transparent, then #fff) and draws
   its border as four 1px box-shadows. Both are replaced: our shadow keeps the
   hairline and swaps the flat drop for the token the rest of the site's raised
   surfaces use, so the picker sits on the page like a menu rather than a
   pasted-on rectangle. */
.flatpickr-calendar {
  background: var(--am-surface, #FFFFFF);
  color: var(--am-text, #1F2530);
  box-shadow:
    0 0 0 1px var(--am-border, #E2E5EA),
    var(--am-shadow-lg, 0 12px 40px rgb(16 24 40 / .12));
}

/* The little pointer at the popup's edge: :before is the border, :after the
   fill. They are separate elements from the popup, so the surface colour has
   to be repeated rather than inherited. */
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--am-border, #E2E5EA); }
.flatpickr-calendar.arrowTop:after  { border-bottom-color: var(--am-surface, #FFFFFF); }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--am-border, #E2E5EA); }
.flatpickr-calendar.arrowBottom:after  { border-top-color: var(--am-surface, #FFFFFF); }

/* The rule between the calendar and the time row. */
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid var(--am-border, #E2E5EA);
}


/* --- Month header ---------------------------------------------------------
   `fill` as well as `color`: the prev/next chevrons are SVGs whose paths are
   `fill:inherit`, so whatever fill they resolve to is what actually paints
   them. Setting only `color` leaves two black arrows on a dark popup -- the
   same defect that made the site's own icons disappear, arriving from the
   other direction. See mu-plugins/americon-icons.php.

   The two buttons are listed here EXPLICITLY, and that is the whole point of
   this rule. `.flatpickr-prev-month` and `.flatpickr-next-month` are siblings
   of `.flatpickr-month` in flatpickr's markup, not children of it --

     <div class="flatpickr-months">
       <span class="flatpickr-prev-month">   <-- sibling
       <div  class="flatpickr-month">        <-- the month/year label only
       <span class="flatpickr-next-month">   <-- sibling

   -- so `inherit` on the chevrons resolves against `.flatpickr-months`, which
   nothing here sets, and a rule aimed at `.flatpickr-month` alone sails past
   them. They kept the vendor's `fill:rgba(0,0,0,.9)` in both schemes: fine on
   the white popup this file replaced, invisible on the dark one it draws. */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--am-text, #1F2530);
  fill: var(--am-text, #1F2530);
}

/* Vendor hover is #f64747, a red belonging to no palette here and reading as
   an error against a form that uses red for exactly that. */
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--am-accent-ink, #272E7E);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--am-accent-ink, #272E7E);
}

/* The month <select> and the year spinner both inherit `color` from the header
   above. What they do not inherit is the background of their own dropdown,
   which the browser paints -- hence color-scheme, which is what tells it to
   draw a native menu in the scheme the page is actually in. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color-scheme: light dark;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent);
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  color: var(--am-text-subtle, #646D79);
}

/* The year spinner's up/down affordances: a hairline box with a triangle in
   it, all three drawn as borders. */
.numInputWrapper span {
  border-color: var(--am-border, #E2E5EA);
}

.numInputWrapper span:hover {
  background: color-mix(in oklab, var(--am-accent, #272E7E) 16%, transparent);
}

.numInputWrapper span:active {
  background: color-mix(in oklab, var(--am-accent, #272E7E) 24%, transparent);
}

.numInputWrapper:hover {
  background: color-mix(in oklab, var(--am-accent, #272E7E) 7%, transparent);
}

/* Vendor paints any <svg> inside the spinner at rgba(0,0,0,.5). Nothing
   renders one there today; it is listed for the same reason the range-selection
   rules below are, so it is already a token if a build starts to. */
.numInputWrapper span svg path {
  fill: var(--am-text-muted, #5E6673);
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--am-text-muted, #5E6673);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--am-text-muted, #5E6673);
}


/* --- Weekday initials -----------------------------------------------------
   The site's token for small uppercase labels, which is what these are. */
span.flatpickr-weekday {
  color: var(--am-text-subtle, #646D79);
}


/* --- Days ----------------------------------------------------------------- */

.flatpickr-day {
  color: var(--am-text, #1F2530);
}

/* Hover and in-range share one vendor rule and one appearance here: the 12%
   accent tint the site already uses for a chip on a card, which
   tests/test-contrast.php measures body text against in both schemes. The
   vendor value is #e6e6e6, a light grey that is invisible on a dark popup. */
.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: color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent);
  border-color: transparent;
  color: var(--am-text, #1F2530);
}

.flatpickr-day.inRange {
  box-shadow:
    -5px 0 0 color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent),
     5px 0 0 color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent);
}

/* Today is a ring, not a fill -- the fill means "chosen" and only one day at a
   time is allowed to say that. --am-accent is the site's ring colour and is
   measured against this surface as the focus ring. */
.flatpickr-day.today {
  border-color: var(--am-accent, #272E7E);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: var(--am-accent, #272E7E);
  background: color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent);
  color: var(--am-text, #1F2530);
}

/* The chosen day. White on --am-accent is the pair already carried by the
   step markers on the invitation screen, so it is measured in both schemes. */
.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: var(--am-accent, #272E7E);
  border-color: var(--am-accent, #272E7E);
  color: #FFFFFF;
}

/*
 * Days from the neighbouring month.
 *
 * The vendor value is rgba(57,57,57,.3) -- about 2:1 on white, and these are
 * numbers somebody reads and clicks, not decoration. --am-text-subtle is this
 * site's quietest READABLE ink and is measured against every surface; it still
 * reads as clearly secondary beside --am-text days.
 */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: var(--am-text-subtle, #646D79);
  background: transparent;
  border-color: transparent;
}

/*
 * Genuinely disabled days. Deliberately below the 4.5:1 floor and deliberately
 * not raised: 1.4.3 exempts inactive controls, and a disabled day that reads
 * as strongly as an available one is a date somebody will keep trying to
 * click. The 40% mix lands around 2:1 in both schemes -- present enough to see
 * the grid is complete, quiet enough to read as unavailable.
 */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: color-mix(in oklab, var(--am-text-subtle, #646D79) 40%, transparent);
  background: transparent;
  border-color: transparent;
}


/* --- Week numbers, when a picker turns them on ---------------------------- */

.flatpickr-weekwrapper .flatpickr-weeks {
  box-shadow: 1px 0 0 var(--am-border, #E2E5EA);
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  color: var(--am-text-subtle, #646D79);
  background: transparent;
}


/* --- The time row ---------------------------------------------------------
   Hour, minute and AM/PM. These are the controls that carry the bid deadline's
   actual cut-off, so they take body ink rather than anything quieter. */
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--am-text, #1F2530);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: color-mix(in oklab, var(--am-accent, #272E7E) 12%, transparent);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--am-text-muted, #5E6673);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--am-text-muted, #5E6673);
}