.court-date-range-picker {
    max-width: 22rem;
}

.court-date-range-picker .row {
    margin-bottom: 0.8rem;
}

.court-date-picker {
    max-width: 15rem;
}

.court-date-picker .usa-input,
.court-date-picker .usa-date-picker__external-input {
    box-sizing: border-box;
    font-size: 1rem;
    height: 2.5rem;
    max-width: 11rem;
}

.court-date-picker .usa-date-picker__wrapper {
    display: flex;
    align-items: stretch;
}

.court-date-picker .usa-date-picker__button {
    min-height: 2.5rem;
    min-width: 2.75rem;
}

.court-date-hint {
    clear: both;
    color: #4d4d4d;
    font-size: 1rem;
    line-height: 1.4;
    margin: -0.2rem 0 1rem 35%;
}

@media only screen and (max-width: 767px) {
    .court-date-range-picker,
    .court-date-picker,
    .court-date-picker .usa-input,
    .court-date-picker .usa-date-picker__external-input {
        max-width: none;
        width: 100%;
    }

    .court-date-hint {
        margin: -0.2rem auto 1rem;
        width: 98%;
    }
}

/* ==========================================================================
   Calendar popup palette (WCAG 2.1 AAA, 7:1). White background; black
   weekdays; red weekends; navy month/year header; bold navy today. Loaded
   after uswds.min.css so these rules win. Red/navy reuse SCWeb's
   vanilla-calendar-pro theme values for a consistent court palette:
   #A30000 ~8.2:1 on white, #073873 ~11.5:1 on white.
   ========================================================================== */

.usa-date-picker__calendar,
.usa-date-picker__calendar__cell,
.usa-date-picker__calendar__date,
.usa-date-picker__calendar__month,
.usa-date-picker__calendar__month-selection,
.usa-date-picker__calendar__year,
.usa-date-picker__calendar__year-selection,
.usa-date-picker__calendar__previous-year,
.usa-date-picker__calendar__previous-month,
.usa-date-picker__calendar__next-year,
.usa-date-picker__calendar__next-month {
    background-color: #fff;
}

.usa-date-picker__calendar__month-selection,
.usa-date-picker__calendar__year-selection {
    color: #073873;
}

/* The header row splits its width 1/8th per nav-arrow cell and 4/8ths (half)
   for the month/year label (vendor's own flex ratios). At the vendor's
   default 20rem popup that leaves the label ~160px wide -- enough for "June
   2026" but not consistently enough for longer names ("September 2026",
   "November 2026"): the year button can be squeezed far enough right that
   the next-month cell's opaque background paints over it, making the year
   look (and click) like it vanished. Widen the popup so every nav-arrow cell
   clears the 44px AAA touch-target floor (368px / 8) and the label keeps a
   comfortable margin regardless of month-name length. */
.usa-date-picker__calendar {
    min-width: 23rem;
    max-width: 23rem;
}

/* WCAG 2.5.5 Target Size (Enhanced), AAA: every interactive control needs a
   44x44px hit area. Vendor padding alone renders day cells at ~52x38px and
   the nav arrows/month/year header buttons at ~46x40px -- wide enough but a
   few px short on height. Raise the floor explicitly (mirrors the same fix
   already applied to SCWeb's vanilla-calendar-pro theme). */
.usa-date-picker__calendar__date,
.usa-date-picker__calendar__previous-year,
.usa-date-picker__calendar__previous-month,
.usa-date-picker__calendar__next-year,
.usa-date-picker__calendar__next-month,
.usa-date-picker__calendar__month-selection,
.usa-date-picker__calendar__year-selection {
    min-height: 2.75rem;
}

/* displaytagv3.css carries an unscoped `thead tr { background-color: #073873; }`
   rule for the search-results table; with no class guard it also paints this
   calendar's day-of-week header row navy, leaving the black/red text above at
   ~1.4-1.8:1 (fails even AA). Reassert white so that text is legible again. */
.usa-date-picker__calendar__table thead tr {
    background-color: #fff;
}

.usa-date-picker__calendar__table thead th {
    color: #000;
}
.usa-date-picker__calendar__table thead th:nth-child(1),
.usa-date-picker__calendar__table thead th:nth-child(7) {
    color: #A30000;
}

/* Date numbers: black weekdays, red Sun/Sat (columns 1 and 7 of 7; the grid
   always starts the week on Sunday). Excluded from both: selected/range-date
   (the vendor's white-on-blue selected text must stand), previous/next-month
   (kept on the muted gray below regardless of weekday/weekend, to preserve
   the "not this month" cue), and today (its own navy rule below wins
   regardless of weekday/weekend so today stays identifiable either way). */
.usa-date-picker__calendar__table tbody .usa-date-picker__calendar__date:not(.usa-date-picker__calendar__date--selected):not(.usa-date-picker__calendar__date--range-date):not(.usa-date-picker__calendar__date--range-date-start):not(.usa-date-picker__calendar__date--range-date-end):not(.usa-date-picker__calendar__date--previous-month):not(.usa-date-picker__calendar__date--next-month):not(.usa-date-picker__calendar__date--today) {
    color: #000;
}
.usa-date-picker__calendar__table tbody td:nth-child(1) .usa-date-picker__calendar__date:not(.usa-date-picker__calendar__date--selected):not(.usa-date-picker__calendar__date--range-date):not(.usa-date-picker__calendar__date--range-date-start):not(.usa-date-picker__calendar__date--range-date-end):not(.usa-date-picker__calendar__date--previous-month):not(.usa-date-picker__calendar__date--next-month):not(.usa-date-picker__calendar__date--today),
.usa-date-picker__calendar__table tbody td:nth-child(7) .usa-date-picker__calendar__date:not(.usa-date-picker__calendar__date--selected):not(.usa-date-picker__calendar__date--range-date):not(.usa-date-picker__calendar__date--range-date-start):not(.usa-date-picker__calendar__date--range-date-end):not(.usa-date-picker__calendar__date--previous-month):not(.usa-date-picker__calendar__date--next-month):not(.usa-date-picker__calendar__date--today) {
    color: #A30000;
}

/* Adjacent-month dates: vendor's #5d5d52 is only ~6.7:1 on the new white
   background (fails AAA); darken to #595959 (~7.0:1). */
.usa-date-picker__calendar__date--next-month:not([disabled]),
.usa-date-picker__calendar__date--previous-month:not([disabled]) {
    color: #595959;
}

/* Today: bold always; navy only when not selected/range-date, so the
   vendor's white selected-text stays legible on its blue background. */
.usa-date-picker__calendar__date--today {
    font-weight: 700;
}
.usa-date-picker__calendar__date--today:not(.usa-date-picker__calendar__date--selected):not(.usa-date-picker__calendar__date--range-date) {
    color: #073873;
}

/* Selected date: vendor's own #0050d8/#f9f9f9 pairing is only ~6.34:1 (fails
   AAA 7:1 for normal-size text). Remap to the same navy used for the
   month/year header and today (~10:1 with white text), unifying the
   calendar on one blue and matching SCWeb's vanilla-calendar-pro theme. */
.usa-date-picker__calendar__date--selected,
.usa-date-picker__calendar__date--range-date {
    background-color: #073873;
    color: #fff;
}
.usa-date-picker__calendar__date--selected:not([disabled]),
.usa-date-picker__calendar__date--range-date:not([disabled]) {
    background-color: #073873;
    color: #fff;
}
.usa-date-picker__calendar__date--selected:not([disabled]):hover,
.usa-date-picker__calendar__date--range-date:not([disabled]):hover {
    background-color: #073873;
    color: #fff;
}
.usa-date-picker__calendar__date--selected:not([disabled]):focus,
.usa-date-picker__calendar__date--range-date:not([disabled]):focus {
    background-color: #073873;
    color: #fff;
}
.usa-date-picker__calendar__date--selected:not([disabled]):active,
.usa-date-picker__calendar__date--range-date:not([disabled]):active {
    background-color: #052449;
}