/* ==========================================================================
   Date range picker (date_range_controller.js, FiltersHelper#filter_date_range): a field that reads back the range
   and opens a calendar of two months where the first click is the start and the second the end, with shortcuts and
   exact-date fields. Colour only marks the chosen days.
   ========================================================================== */

.date-range { position: relative; min-width: 0; }
.date-range__button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.date-range__button .icon { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.date-range__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.date-range__label.is-placeholder { color: var(--text-3); }
.date-range__button[aria-expanded="true"] { border-color: var(--brand); box-shadow: var(--focus); }

.date-range__panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: max-content; max-width: calc(100vw - 32px);
  padding: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); animation: date-range-in .16s var(--ease);
}
.date-range__panel[hidden] { display: none; }
/* movement only: a fade that the browser does not run (a hidden tab, a throttled frame) would leave the panel invisible */
@keyframes date-range-in { from { transform: translateY(-4px); } }

.date-range__body { display: flex; gap: 14px; }

/* shortcuts: a column on the left, chips on top when the page is narrow */
.date-range__presets { display: grid; align-content: start; gap: 2px; padding-right: 14px; border-right: 1px solid var(--line); }
.date-range__preset {
  padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.date-range__preset:hover { background: var(--surface-2); color: var(--text); }

/* the months; the arrows sit on the title line, at both ends */
.date-range__calendars { position: relative; }
.date-range__nav { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.date-range__nav .icon-button { width: 30px; height: 30px; pointer-events: auto; }
.date-range__nav .icon-button .icon { width: 17px; height: 17px; }
.date-range__months { display: flex; gap: 22px; }
.date-range__title { height: 30px; line-height: 30px; margin-bottom: 4px; text-align: center; font-size: 14px; font-weight: 600; }
.date-range__title::first-letter { text-transform: uppercase; }
.date-range__grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.date-range__weekday { height: 26px; line-height: 26px; text-align: center; font-size: 11.5px; color: var(--text-3); }
.date-range__weekday::first-letter { text-transform: uppercase; }

.date-range__day {
  height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
}
.date-range__day:hover { background: var(--surface-2); }
.date-range__day:focus-visible { outline: none; box-shadow: var(--focus); z-index: 1; }
.date-range__day.is-today { font-weight: 650; }
.date-range__day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
/* the days between the bounds form one band; the bounds close it */
/* (mixed from the brand colour: --brand-soft is too pale for a band and some palettes make it white) */
.date-range__day.is-in-range { border-radius: 0; background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--text); }
.date-range__day.is-preview { border-radius: 0; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--text); }
.date-range__day.is-start, .date-range__day.is-end { background: var(--brand-strong); color: var(--on-brand); font-weight: 600; }
.date-range__day.is-start { border-radius: 8px 0 0 8px; }
.date-range__day.is-end { border-radius: 0 8px 8px 0; }
.date-range__day.is-single { border-radius: 8px; }

/* exact dates (also the way to leave one bound open), clear and done */
.date-range__footer {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.date-range__bound { display: grid; gap: 4px; font-size: 12px; color: var(--text-3); }
.date-range__bound .input { width: 9.5rem; }
.date-range__actions { display: flex; gap: 6px; margin-left: auto; }

@container page (max-width: 760px) {
  .date-range__months > .date-range__month + .date-range__month { display: none; }
  .date-range__body { flex-direction: column; gap: 10px; }
  .date-range__presets { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .date-range__preset { padding: 5px 9px; background: var(--surface-2); font-size: 12.5px; }
  .date-range__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}