/* Date range picker — the HubSpot-style popover behind the "Service date" quick
   filter: a rail of named ranges beside a dual-month calendar, Clear/Apply below.
   Markup: the range_presets branch of shared/components/toolbar/_condition_value_picker.html.
   Behaviour: shared/js/date-range-calendar.js.

   Lives inside .global-toolbar__menu, which brings the card, shadow and
   fixed positioning; this file only shapes the inside. The whole popover is wider
   than the stock menu, and the toolbar's _reclampWide() (in _opps_toolbar_js.html)
   is what pulls it back on screen — worth knowing before narrowing anything here.
   On narrow viewports the rail and the two months wrap instead of overflowing. */
/* placeMenu stops the menu at the screen's bottom edge; on a phone the rail, two
   months and Is known / Is unknown run taller than that, so this menu scrolls.
   Only this one: the number menus hold a combobox list that overflow would clip. */
.global-toolbar__menu:has(.global-date-range) {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-date-range__body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-smd);
}

/* The preset rail — a quiet column; the active pick carries the brand tint the
   toolbar's own active chips use. */
.global-date-range__rail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 9rem;
    padding-right: var(--spacing-smd);
    border-right: 1px solid var(--color-border);
}

/* Twenty-odd named ranges outrun the calendar beside them, so the list scrolls
   inside the rail and the popover keeps the calendar's height: six 2rem day
   rows plus the month head and the day names, near enough 16rem. The hint
   below stays put. */
.global-date-range__presets {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-date-range__preset {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    text-align: left;
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-date-range__preset:hover {
    background: var(--color-surface-hover);
}

.global-date-range__preset.is-active {
    background: var(--color-action-tint);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

.global-date-range__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.global-date-range__month-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.global-date-range__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-date-range__nav:hover {
    background: var(--color-surface-hover);
}

/* Kept in the layout so the pair of headers stays aligned — each panel shows
   only its outward arrow. */
.global-date-range__nav.is-blank {
    visibility: hidden;
}

.global-date-range__grid {
    display: grid;
    grid-template-columns: repeat(7, 2rem);
}

.global-date-range__wd {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-xs);
    text-align: center;
    color: var(--color-text-muted);
}

.global-date-range__day {
    height: 2rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-date-range__day:hover {
    background: var(--color-surface-hover);
}

.global-date-range__day.is-out {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.global-date-range__day.is-today {
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
}

/* The staged range: dark circles on the endpoints, a light band between. The
   band squares off so consecutive days read as one stripe. */
.global-date-range__day.is-in-span {
    background: var(--color-action-tint);
    border-radius: var(--radius-none);
}

.global-date-range__day.is-start,
.global-date-range__day.is-end {
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    border-radius: var(--radius-pill);
}

.global-date-range__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-smd);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}