/* AMZ Vault shared Litepicker theme (2026-07-25).
 *
 * ONE look for every date picker (Nick: pickers differed per page; the
 * Campaigns one was closest but had a white-on-white "N days selected"
 * tooltip and grey in-range day numbers on the blue band).  Keeps the
 * blue selection Nick likes; day text inside the band goes white.
 *
 * Loaded from base.html for all pages.  The CDN litepicker.css declares
 * its variables on :root and pages load it AFTER this file — so the
 * overrides live on .litepicker (closer to the consuming elements than
 * :root), which wins regardless of stylesheet order.
 */

.litepicker {
  font-family: inherit;

  --litepicker-container-months-color-bg: var(--av-bg-750, #172232);
  --litepicker-container-months-box-shadow-color: rgba(0, 0, 0, 0.35);
  --litepicker-footer-color-bg: var(--av-bg-800, #111b28);
  --litepicker-footer-box-shadow-color: transparent;

  --litepicker-month-header-color: var(--av-text-primary, #f4f7fb);
  --litepicker-month-weekday-color: var(--av-text-muted, #7b8da1);
  --litepicker-button-prev-month-color: var(--av-text-muted, #7b8da1);
  --litepicker-button-next-month-color: var(--av-text-muted, #7b8da1);
  --litepicker-button-prev-month-color-hover: var(--av-text-primary, #f4f7fb);
  --litepicker-button-next-month-color-hover: var(--av-text-primary, #f4f7fb);

  --litepicker-day-color: var(--av-text-secondary, #c3ced8);
  --litepicker-day-color-hover: #ffffff;
  --litepicker-is-today-color: var(--av-danger, #fb7185);
  --litepicker-is-locked-color: var(--av-text-dim, #5e7085);

  /* The blue selection band (kept — it reads well against the dark
     theme); start/end anchors a solid blue. */
  --litepicker-is-in-range-color: rgba(33, 150, 243, 0.32);
  --litepicker-is-start-color: #ffffff;
  --litepicker-is-start-color-bg: #2196f3;
  --litepicker-is-end-color: #ffffff;
  --litepicker-is-end-color-bg: #2196f3;

  --litepicker-tooltip-color-bg: var(--av-bg-650, #1d2a3a);

  --litepicker-button-cancel-color: #ffffff;
  --litepicker-button-cancel-color-bg: var(--av-bg-500, #2f4055);
  --litepicker-button-apply-color: #10131a;
  --litepicker-button-apply-color-bg: var(--av-bronze, #d7b17c);
  --litepicker-button-reset-color: var(--av-text-muted, #7b8da1);
  --litepicker-button-reset-color-hover: var(--av-text-primary, #f4f7fb);
}

/* "N days selected" tooltip: explicit text color — it inherited the
   page's light text onto the default WHITE tooltip bg (white-on-white). */
.litepicker .container__tooltip {
  color: var(--av-text-primary, #f4f7fb);
  border: 1px solid var(--av-border-medium, rgba(148, 163, 184, 0.28));
}
.litepicker .container__tooltip::before {
  border-top-color: var(--av-border-medium, rgba(148, 163, 184, 0.28));
}
.litepicker .container__tooltip::after {
  border-top-color: var(--av-bg-650, #1d2a3a);
}

/* Day numbers inside the selected band: white on blue (they kept the
   muted grey day color — unreadable against the band). */
.litepicker .container__days .day-item.is-in-range,
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  color: #ffffff;
}
.litepicker .container__days .day-item:hover {
  box-shadow: inset 0 0 0 1px #2196f3;
  color: #ffffff;
}

.litepicker .container__months {
  border: 1px solid var(--av-border-soft, rgba(148, 163, 184, 0.18));
  border-radius: 10px;
}
.litepicker .container__footer {
  border: 1px solid var(--av-border-soft, rgba(148, 163, 184, 0.18));
  border-radius: 0 0 10px 10px;
  margin: 0;
}

/* Day theme: apply-button text flips light on the deeper day bronze. */
:root[data-theme="day"] .litepicker {
  --litepicker-button-apply-color: #f8f4ec;
}