/* ==========================================================================
   Questionnaire date picker — DESIGN.md §9.6.4 (trigger) + §9.10 (popup)
   Trigger scope: body.sidebar-nav.page-questionnaire #tblQuestionnaire
                  .qDiv.qDiv:has(input.qCal)
                  — qCal class is unique to date inputs (avoids text-question
                    qDivs). Doubled .qDiv.qDiv + .page-questionnaire add the
                    specificity needed to beat questionnaire.css narrative-row
                    reset (`tr:has(.qN) > td:nth-child(4) .qDiv`).
   Popup scope:   body.sidebar-nav .pnlCalQ88 (property-gated class set on
                  the shared master ucCalTestA via IsQuestionnaireMode="True"
                  in CreateQuestionnaire.ascx).
   ========================================================================== */

/* --------------------------------------------------------------------------
   §9.6.4 — Trigger anatomy
   .qDiv contains: <Q88:TextBox.NormalDateBox> + <asp:ImageButton.jaQCal>
   Render as a single h:36 box with leading SVG Calendar icon.
   -------------------------------------------------------------------------- */

body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;            /* anchors the absolutely positioned ImageButton overlay */
    height: 36px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-sizing: border-box;
    /* Token bridge for Phase 4 dark mode */
    background: var(--input-background, #ffffff);
    border-color: var(--border-input, #e2e8f0);
}

/* Leading Calendar icon — Lucide Calendar inlined as data URI to avoid a new asset.
   The viewBox + path values are the Lucide Calendar 24×24 icon at size 16.        */
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal)::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: var(--text-primary, #0f172a);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
}

/* The text input fills the lane; legacy NormalDateBox / qCal loses its border + bg. */
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.qCal,
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.NormalDateBox {
    flex: 1;
    min-width: 0;
    height: 24px;                  /* visual breathing room inside the 36h container */
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;              /* Inter Medium per spec */
    color: var(--text-primary, #0f172a);
    /* Override MainWhiteout.css `.NormalDateBox` legacy float */
    float: none;
}

body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.qCal::placeholder,
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.NormalDateBox::placeholder {
    color: var(--text-muted, #475569);
    font-weight: 400;              /* placeholder is normal weight per shadcn convention */
}

body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.qCal:focus,
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) input.NormalDateBox:focus {
    outline: none;
    box-shadow: none;
}

/* The legacy ImageButton (cal.gif trigger) becomes a transparent click overlay
   covering the whole .qDiv so clicking anywhere opens the popup. */
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal) .jaQCal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;          /* legacy inline BorderWidth="0" already exists */
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 1;                    /* above the input so its hit area covers the lane */
    /* Suppress legacy float and vertical-align */
    float: none !important;
    vertical-align: baseline !important;
}

/* Focus ring for keyboard users — matches Phase 4 input focus pattern. */
body.sidebar-nav.page-questionnaire #tblQuestionnaire .qDiv.qDiv:has(input.qCal):focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.2);
}

/* --------------------------------------------------------------------------
   Trigger anatomy — general scope.

   Mirrors the questionnaire-only rules above (lines 20-110) but with a
   broader selector so any sidebar-nav page using the FieldUi ViewType +
   IsQuestionnaireMode=True on a CalendarControl picks up the new trigger
   chrome. Used by Terminal Vetting (cldrReported) and intended for any
   future consumer that opts in via those two flags.

   Selector pattern: `:has(> input.qCal)` is unique to calendar triggers in
   FieldUi mode (CalendarControl.ascx.cs line 477 sets `qCal` only when
   ViewType == FieldUi). The questionnaire-scoped rules above keep their
   higher specificity to defeat questionnaire.css narrative-row resets.
   -------------------------------------------------------------------------- */

body.sidebar-nav .qDiv:has(> input.qCal) {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    height: 36px;
    padding: 0 12px;
    background: var(--input-background, #ffffff);
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 8px;
    box-sizing: border-box;
}

body.sidebar-nav .qDiv:has(> input.qCal)::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: var(--text-primary, #0f172a);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
}

body.sidebar-nav .qDiv:has(> input.qCal) input.qCal,
body.sidebar-nav .qDiv:has(> input.qCal) input.NormalDateBox {
    flex: 1;
    min-width: 0;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    float: none;
}

body.sidebar-nav .qDiv:has(> input.qCal) input.qCal::placeholder,
body.sidebar-nav .qDiv:has(> input.qCal) input.NormalDateBox::placeholder {
    color: var(--text-muted, #475569);
    font-weight: 400;
}

body.sidebar-nav .qDiv:has(> input.qCal) input.qCal:focus,
body.sidebar-nav .qDiv:has(> input.qCal) input.NormalDateBox:focus {
    outline: none;
    box-shadow: none;
}

body.sidebar-nav .qDiv:has(> input.qCal) .jaQCal {
    position: absolute;
    /* Cover only the leading-icon hit area (the Lucide Calendar ::before
       pseudo at left:12, 16px wide) instead of the whole .qDiv. Otherwise
       the transparent overlay swallows clicks on the text input and users
       can't focus it to type a date manually — they'd be forced to use the
       popup. With this narrowed footprint, clicking the icon still opens
       the popup but clicking the input area focuses the input for typing. */
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;                       /* 12 (padding) + 16 (icon) + 8 (slack) */
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    float: none !important;
    vertical-align: baseline !important;
}

body.sidebar-nav .qDiv:has(> input.qCal):focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.2);
}

/* --------------------------------------------------------------------------
   Global defaults — new chrome is hidden everywhere unless inside the
   questionnaire-mode popup (.pnlCalQ88). Without these defaults, legacy
   callers (vessel update, inspection create, etc.) would render the new
   header, Cancel button, and "Save" span on top of their unchanged legacy
   popup chrome.
   -------------------------------------------------------------------------- */

.q88-cal-new {
    display: none;
}
.q88-cal-new-text {
    display: none;
}

/* --------------------------------------------------------------------------
   §9.10 — Popup card (304 × auto, white card with shadow/sm)
   The legacy popup is a nested-table layout inside <asp:Panel pnlCal>.
   Within questionnaire scope we flatten to a vertical card.
   -------------------------------------------------------------------------- */

/* Ajax Toolkit's PopupControlExtender wraps pnlCal in a positioned container.
   The .pnlCalQ88 class is on pnlCal itself, set by CalendarControl.ascx.cs
   when IsQuestionnaireMode == true. */

body.sidebar-nav .pnlCalQ88 {
    width: 304px;
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
    padding: 16px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
    /* Stack header + grid + legacy table contents + footer vertically. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Structural guard for the viewport clamp in Q88.DatePicker.js: when the card
       is taller than the viewport, `Math.max(4, vh - ph - 4)` pins the top at 4px
       and the bottom is still cut off — and a position:fixed card cannot be
       scrolled by the page. Not reachable today (399px card, 492px licence
       iframe), so this makes it structurally safe rather than dimensionally
       lucky. Safe to add overflow here: every child is in-flow (the legacy
       .toolTipPopupContainer is flattened into the card flow at §"Flatten the
       legacy nested table layout"), and the ACT CalendarExtender popup is a
       SIBLING of this card, not a descendant, so nothing escapes the box. */
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    /* Pinned, not left to compute. CSS Overflow §3: a `visible` paired with a
       non-`visible` value on the other axis computes to `auto`, so `overflow-y:
       auto` alone silently makes this a HORIZONTAL scroll container too. That
       turned the 1.6px the grid used to overhang by (see .q88-cal-grid) into a
       real scrollbar across the bottom of the card, which then ate 16px of the
       card's height. The card is a fixed-width dialog — it should only ever
       scroll vertically, and any horizontal overflow is a bug to fix at source
       rather than something to offer the user a scrollbar for. */
    overflow-x: hidden;
}

/* /Controls/Calendar.ascx with UseNewCalendar="True" renders pnlCal INSIDE its
   .qDiv span (no PopupControlExtender). Anchor the popup just below the input
   so it tracks scroll naturally — .qDiv is already position:relative via the
   trigger rules at §"General scope". z-index keeps it above adjacent fields. */
body.sidebar-nav .qDiv > .pnlCalQ88 {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
}

/* Save / Cancel footer — right-aligned button cluster matching the refresh
   button chrome. The Save button auto-closes via the inline onclick; the date
   itself is committed by Q88.DatePicker.js's onSelect when the user picks a
   day, so "Save" is effectively a confirm-and-dismiss. */
body.sidebar-nav .pnlCalQ88 .q88-cal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    margin-top: 4px;
}

body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel,
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel {
    background: var(--surface-raised, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-input, #e2e8f0);
}

/* NOT var(--accent). Despite the shadcn-ish name, `--accent` in tokens.css is a
   BRAND colour, not a hover surface: `--raw-q88-navy-dark` #2d3663 on Q88 and
   `--raw-milbros-muted` #51777f on Milbros. The `#f1f5f9` fallback therefore
   never applies and the hover painted a dark navy / dark teal slab under the
   base `--text-primary` (#0f172a) text — dark on dark. `--surface-hover`
   (--raw-gray-100 #eeeeee, dark-mode-aware at tokens.css:591) is the token
   actually meant for this. Same root cause as the day-cell fix at ~:655 and the
   ACT one at ~:850, which pre-date this and used a brand tint instead; a tint is
   right for a day cell (it must read as "not selected"), but Cancel and the
   close-X are neutral controls, so the neutral surface token is correct here. */
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel:hover {
    background: var(--surface-hover, #f1f5f9);
}

body.sidebar-nav .pnlCalQ88 .q88-cal-btn-save {
    background: var(--primary);
    color: var(--primary-foreground, #ffffff);
    border: 1px solid var(--primary);
}

body.sidebar-nav .pnlCalQ88 .q88-cal-btn-save:hover {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    opacity: 0.9;
}

/* Hide the legacy decorative chrome and the 3-dropdown <td>. */
body.sidebar-nav .pnlCalQ88 .q88-cal-legacy {
    display: none !important;
}

/* Show the new chrome (default-hidden via .q88-cal-new in legacy CSS path). */
body.sidebar-nav .pnlCalQ88 .q88-cal-new {
    display: flex;
}

/* Header: title + close-X */
body.sidebar-nav .pnlCalQ88 .q88-cal-header {
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
body.sidebar-nav .pnlCalQ88 .q88-cal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text-muted, #475569);
    cursor: pointer;
    /* Native <button> does not inherit font-family. */
    font-family: inherit;
}
/* --surface-hover, not --accent — see the note above the Cancel hover rule. This
   is the one that was reported: hovering the picker's close-X turned it dark
   teal on Milbros. */
body.sidebar-nav .pnlCalQ88 .q88-cal-close:hover {
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-primary, #0f172a);
}

/* Grid mount point — jQuery UI datepicker root will be appended here.

   `100%`, not a computed pixel width. This was `272px` "= 304 card − 16×2
   padding", which forgets the card's own 1px border: a 304px BORDER-BOX card
   with 16px padding leaves 270.4px of content, so the grid overhung by 1.6px
   and the card (a horizontal scroll container by accident — see .pnlCalQ88)
   grew a scrollbar along its bottom edge. Filling the content box keeps the two
   in step whatever the card's padding, border or width turn out to be, which is
   what the narrower EditQA and Milbros hosts need anyway. */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* The legacy outer table (`.toolTipPopupContainer`) carries an inline
   `style="width: 290px"` — wider than the popup's 272px content area
   (304 card − 16×2 padding) — which causes the button cell at the bottom
   to overflow past the popup right border. Constrain it to 100% so it
   respects the popup padding. */
body.sidebar-nav .pnlCalQ88 .toolTipPopupContainer {
    width: 100% !important;
    box-sizing: border-box;
}

/* Flatten the legacy nested table layout so the surviving sections (time +
   custom-state radios + footer) read as block-level items in the card flow.
   We flatten down through the innermost content table inside `<div class="content">`
   too, then turn its tbody/tr into `display: contents` so each <td> becomes a
   direct flex child — that lets us reorder via `order` to put Cancel/Save at
   the bottom of the card per §9.10 dialog-footer convention. */
body.sidebar-nav .pnlCalQ88 .toolTipPopupContainer,
body.sidebar-nav .pnlCalQ88 .toolTipPopupContainer > tbody,
body.sidebar-nav .pnlCalQ88 .toolTipPopupContainer > tbody > tr,
body.sidebar-nav .pnlCalQ88 .toolTipPopupContainer > tbody > tr > td,
body.sidebar-nav .pnlCalQ88 .tblCal,
body.sidebar-nav .pnlCalQ88 .tblCal > tbody,
body.sidebar-nav .pnlCalQ88 .tblCal > tbody > tr,
body.sidebar-nav .pnlCalQ88 .tblCal > tbody > tr > td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent;
    vertical-align: baseline;
}

/* Drop the legacy tooltip's inner scroll box. Main.css / MainWhiteout.css give
   `.toolTipPopupContainer .content` a `max-height: 235px; overflow: auto` for
   ordinary tooltips, and the calendar's surviving legacy chrome (time inputs,
   custom-state radios, "Set As Today", Cancel/Save) sits inside that div. At
   today's ~86px it never triggers, but any host that shows the time row plus the
   radios would put a second scrollbar INSIDE the card — nested in the card's own
   vertical scroll guard. The card owns scrolling; this div should just flow. */
body.sidebar-nav .pnlCalQ88 div.content {
    max-height: none;
    overflow: visible;
}

/* Innermost content table (Date: | DDLs | Cancel/Save  /  time+radios | Set As Today)
   — convert to flex column with order-based reflow. */
body.sidebar-nav .pnlCalQ88 div.content > table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto !important;
    border: 0;
}
body.sidebar-nav .pnlCalQ88 div.content > table > tbody,
body.sidebar-nav .pnlCalQ88 div.content > table > tbody > tr {
    display: contents;            /* tbody/tr collapse so <td>s become flex items */
}
body.sidebar-nav .pnlCalQ88 div.content > table > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0 !important;
    vertical-align: baseline;
}

/* Hide the leftover legacy "Date:" label cell — row 1, cell 1 — which has no
   q88-cal-legacy class on the markup so the global hide rule misses it. */
body.sidebar-nav .pnlCalQ88 div.content > table > tbody > tr:first-child > td:first-child {
    display: none !important;
}

/* Cancel/Save cell (row 1 last cell, hardcoded width:85px in legacy markup).
   Override the width, lay buttons out as a right-aligned flex row, and push to
   the bottom of the card via order. */
body.sidebar-nav .pnlCalQ88 div.content > table > tbody > tr:first-child > td:last-child {
    display: flex !important;
    justify-content: flex-end;
    gap: 11px;
    width: auto !important;
    order: 99;                    /* footer */
    padding-top: 4px;
}

/* "Set As Today" cell — row 2 last cell — render between radios and footer. */
body.sidebar-nav .pnlCalQ88 div.content > table > tbody > tr:nth-child(2) > td:last-child {
    order: 50;
}

/* Legacy "Set As Today" link styled per §9.10 narrative. */
body.sidebar-nav .pnlCalQ88 [id$="btnSetToday"] {
    display: inline-block;
    color: var(--text-link);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 0;
}
body.sidebar-nav .pnlCalQ88 [id$="btnSetToday"]:hover {
    text-decoration: underline;
}

/* Time picker (when ShowTime = true) — restyle in place.
   span has runat="server" so ASP.NET mangles its id; match by id-suffix. */
body.sidebar-nav .pnlCalQ88 [id$="spanTimeCtrls"] {
    display: block;
    margin-top: 8px;
}
body.sidebar-nav .pnlCalQ88 [id$="spanTimeCtrls"] select {
    height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    background: var(--input-background, #ffffff);
}

/* 5 legacy state radios (None / Unknown / N/A / Reverting / Permanent) — restyle as
   §9.5.5 dialog-radio variant. ASP.NET RadioButton renders <input>+<label> as
   flat siblings (not nested), with <br> between options. Keep the natural
   inline flow and let the <br> tags break each pair onto its own row — using
   flex-column here would split the input and its label onto separate rows. */
body.sidebar-nav .pnlCalQ88 #spanCalCustOpts {
    display: block;
    margin-top: 8px;
    line-height: 28px;             /* row gap between options */
}
body.sidebar-nav .pnlCalQ88 #spanCalCustOpts input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--primary);
}
body.sidebar-nav .pnlCalQ88 #spanCalCustOpts label {
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    vertical-align: middle;
    cursor: pointer;
}

/* Footer — Cancel + Save buttons right-aligned. The buttons live inside one
   of the surviving legacy <td> cells, which we already flattened above. */
body.sidebar-nav .pnlCalQ88 [id$="btnSet"].q88-cal-btn-save,
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel {
    display: inline-block;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    box-sizing: border-box;
    /* Native <button> does not inherit font-family — force the Inter stack so
       the Cancel button stops falling back to the UA default (Arial). */
    font-family: inherit;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel {
    background: transparent;
    border: 1px solid var(--border-input, #e2e8f0);
    color: var(--text-primary, #0f172a);
    /* gap to Save provided by parent footer's `gap: 11px` */
}
/* Save button — matches Figma node 62:10801 (Q88 Questionnaires file).
   var(--primary) resolves to the brand token per portal (indigo on Q88,
   teal on Milbros via the body[data-portal="milbros"] override) — no direct
   raw-palette bridge needed. */
body.sidebar-nav .pnlCalQ88 [id$="btnSet"].q88-cal-btn-save {
    background: var(--primary);
    color: var(--primary-foreground, #ffffff);
}
body.sidebar-nav .pnlCalQ88 [id$="btnSet"].q88-cal-btn-save:hover {
    background: var(--button-primary-hover);
    opacity: 0.9;
}
/* Second, later-source-order copy of the Cancel hover — this is the one that
   actually wins. --surface-hover, not --accent; see the note at the first copy. */
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel:hover {
    background: var(--surface-hover, #f1f5f9);
}

/* Dual-span text swap on btnSet: hide legacy "Set", show new "Save". */
body.sidebar-nav .pnlCalQ88 .q88-cal-legacy-text { display: none; }
body.sidebar-nav .pnlCalQ88 .q88-cal-new-text    { display: inline; }

/* --------------------------------------------------------------------------
   jQuery UI datepicker grid skin — anchored under .q88-cal-grid
   -------------------------------------------------------------------------- */

body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker {
    /* Fills the mount point (jquery-ui.css would otherwise impose `17em`).
       Same reason as .q88-cal-grid: no pixel arithmetic to drift out of step
       with the card's box. */
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
}

body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 4px;
    background: transparent;
    border: 0;
    margin-bottom: 8px;
}

body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-prev,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-next {
    position: static;              /* override jQuery UI absolute positioning */
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted, #475569);
}

/* jQuery UI emits children in source order Prev → Next → Title; reorder via
   flex so the visual order is [Prev] [Title] [Next] (title between the arrows). */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-prev  { order: 1; }
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title { order: 2; }
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-next  { order: 3; }
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-prev .ui-icon,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-next .ui-icon {
    display: none;                 /* hide jQuery UI sprite */
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-prev::before,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-next::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 4px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-prev::before {
    -webkit-mask-image: var(--icon-chevron-left);
            mask-image: var(--icon-chevron-left);
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-next::before {
    -webkit-mask-image: var(--icon-chevron-right);
            mask-image: var(--icon-chevron-right);
}

body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
}

/* --------------------------------------------------------------------------
   QEN-8953 — month + year quick-select dropdowns

   With changeMonth/changeYear on (Q88.DatePicker.js), jQuery UI replaces the
   static "August 2026" title text with two native selects inside
   .ui-datepicker-title:
       <select class="ui-datepicker-month"> Jan..Dec (monthNamesShort)
       <select class="ui-datepicker-year">  the dpdYear whitelist
   It emits no separator between them when BOTH are enabled, so the gap here is
   the only thing keeping them apart. Header order stays [prev] [title] [next]
   via the `order` rules above; `flex: 1` lets the title claim the middle.
   -------------------------------------------------------------------------- */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;                  /* let the selects shrink before overflowing */
    gap: 12px;
    /* jquery-ui.css:98 gives the title `margin: 0 2.3em` (~32px a side) for its
       own absolutely-positioned arrows. ManageAccount.ascx and
       QuestionnaireCompare load that vendor sheet, and here the arrows are
       static flex siblings, so the inherited margin would just squeeze the two
       dropdowns. Higher specificity than the vendor rule, so no !important. */
    margin: 0;
}

/* Design input: "We shouldn't display a border around the dropdowns. They should
   appear as plain text with only the dropdown chevron icon."

   Two reasons this block is exhaustive + !important rather than a couple of
   tweaks on top of the global select chrome:
     1. components.css's `body.sidebar-nav select:not([multiple])` paints every
        select as a bordered 32px white form control with !important on border,
        radius, background-color, height and padding — and it loads BEFORE
        datePicker.css. Overriding it needs both the extra specificity here and
        !important, matching how the rest of this file overrides the global
        !important layers.
     2. Blank.master never loads components.css (popup iframes render this same
        picker), so appearance:none and the chevron background cannot be
        inherited from it — they have to be declared here to look identical in
        both hosts.
   The chevron reuses --icon-chevron-down-fg-slate, the same token every other
   refreshed select uses, so the glyph matches platform-wide. */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-month,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-year {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: auto !important;            /* shrink-wrap to the widest option */
    height: 24px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;    /* 16px chevron + 4px gap, no leading inset */
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--icon-chevron-down-fg-slate) !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 16px 16px !important;
    box-shadow: none !important;       /* also kills components.css's focus glow */
    /* Native controls do not inherit font-family — restate the whole type ramp.
       !important like its neighbours: components.css sets font-family on selects
       WITHOUT it today, so a plain declaration happens to win, but that is a
       coincidence of the global sheet rather than something to depend on. */
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #0f172a) !important;
    /* Centre the label in whatever slack the control has. jQuery UI's month names
       are not all the same width ("Sep" is wider than "Jul"), and a <select> sizes
       itself to its WIDEST option, so the shorter ones would otherwise sit hard
       left of a box cut for "Sep". Years are all four digits, so this is a no-op
       there — it is the guarantee that matters, not today's metrics. */
    text-align: center;
    cursor: pointer;
}

/* No width floors on these two controls — they shrink-wrap to `label + 4px +
   chevron`, so the header reads as two tight units and the ink of the pair lands
   on the header's centre.

   The floors that used to be here (64px / 76px) existed only because SelectShim
   hard-sets `pop.style.width = trigger.getBoundingClientRect().width`: on a
   shrink-wrapped trigger the year popover kept ~23px of usable text column once
   its 4px padding, the option's 8px padding and the list's scrollbar came off, so
   every year rendered as "2…". Padding the TRIGGER to fix the POPOVER is what put
   ~20px of dead space inside each control, and dead space in a borderless control
   is invisible — it silently pushed the visible header content 10px right of
   centre and opened a 32px gap between the two dropdowns.

   Both lists now size themselves instead (`data-q88-popover-autosize`, stamped in
   Q88.DatePicker.js), so the popovers are floored where the problem actually is —
   see the two blocks below — and the triggers are free to be as tight as their
   labels. */

/* Year list: a plain scrolling column, floored wide enough that a 4-digit year
   clears the option padding AND the scrollbar the ~86 entries (Year-60 .. Year+25,
   CalendarControl.ascx.cs) always summon. Without the floor an autosized popover
   shrink-wraps to the text and then puts the scrollbar THROUGH it, which is the
   original "2…" ellipsis by another route. */
.q88-select-popover--year-list {
    min-width: 86px;
}

/* Month list as one 3-column block instead of a 12-row scrolling column.

   SelectShim caps its popover at 320px (max-height, set inline in position()),
   and a 12-option column needs 12 x 34px plus 10px of chrome = ~418px — so the
   month list always opened part-scrolled: about nine months visible, the rest
   behind a wheel, on a control whose whole point is picking a month in one go.
   Twelve short labels are a fixed, known set, so three to a row they fit in four
   rows (~150px): every month visible at once, no scrollbar. Rows run in reading
   order (Jan Feb Mar / Apr May Jun / …), the layout month-grid pickers use, and
   stay a tidy block for the short lists jQuery UI emits when minDate/maxDate
   clips the range mid-year.

   The year list keeps the plain scrolling column on purpose: ~86 entries have no
   block layout that fits, and a grid of years is harder to scan than a column.

   `data-q88-popover-autosize`, set alongside the class in Q88.DatePicker.js,
   stops the shim pinning the popover to the trigger's width so the block can be
   wider than the 64px month select; the shim clamps it into the viewport in
   exchange. Scoped entirely to the modifier class — no other shimmed select on
   the platform changes.

   list-style and padding are restated rather than inherited from
   .q88-select-popover for the same reason the borderless-select block above is
   self-contained: Blank.master hosts load this file WITHOUT components.css, and
   there an unstyled <ul> would put list bullets and a 40px indent in the grid. */
.q88-select-popover--month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    min-width: 156px;                /* ~52px a column: "May" + its option padding */
    list-style: none;
    padding: 4px;
}

/* Centre each label in its cell. The labels are all three characters, so left
   alignment reads as three separate lists rather than one block. */
.q88-select-popover--month-grid .q88-select-popover__option {
    text-align: center;
}

/* Open state — flip the chevron up, matching every other shimmed select
   (components.css `select.q88-select--open`). That rule is !important but this
   file's base rule above outranks it on specificity, so restate the flip here or
   the calendar's dropdowns would be the only ones stuck pointing down while
   open. Inert on hosts without SelectShim.js — nothing adds the class there. */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.q88-select--open {
    background-image: var(--icon-chevron-up-fg-slate) !important;
}

/* IE-era native expand arrow (components.css only suppresses it for pages that
   load it — restate for the Blank.master hosts). */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select::-ms-expand {
    display: none !important;
}

/* Focus. components.css:1339 signals select focus with `border-color: var(--primary)`
   plus a soft glow; there is no border here to tint, so keep only the glow half.

   Deliberately `:focus`, not `:focus-visible`, and deliberately a glow rather than
   a solid outline: Chromium matches `:focus-visible` on a <select> for POINTER
   input too (unlike buttons and links, where the outline pattern at
   components.css:204 is correct), so a solid 2px ring painted a hard rectangle
   around the control on every ordinary click — reading as exactly the border the
   ticket's design input rules out. The glow is unmistakably a focus state and
   never a field edge.

   Both the glow and the radius need !important: the base rule above sets
   `box-shadow: none !important` AND `border-radius: 0 !important`, and an
   !important declaration beats a plain one regardless of specificity — so
   without it here the glow would still paint, but clipped to a hard rectangle
   rather than following the 4px corners. */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-month:focus,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-year:focus {
    outline: none;
    border-radius: 4px !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.30) !important;
}

body.sidebar-nav .pnlCalQ88 .q88-cal-grid table.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar thead th {
    height: 28px;
    text-align: center;
    font-weight: 500;
    color: var(--text-muted, #475569);
    background: transparent;
    border: 0;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td {
    width: 36px;
    height: 32px;
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td > a,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
    cursor: pointer;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td > a:hover {
    /* QEN-8801 — was var(--accent, #f1f5f9), but --accent resolves to the
       dark navy --raw-q88-navy-dark (#2d3663) on Q88, making the hovered day
       look like the solid-brand SELECTED day. Use a light brand tint so
       hover and selected are visually distinct; day text stays
       --text-primary (readable on the tint). The selected-day rule below has
       equal specificity and later source order, so a hovered selected day
       keeps its solid brand fill. */
    background: rgba(var(--primary-tint), 0.08);
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td.ui-datepicker-today > a {
    border: 1px solid var(--primary);
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td.ui-datepicker-current-day > a,
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td > a.ui-state-active {
    background: var(--primary);
    color: var(--text-on-brand, #ffffff);
}
body.sidebar-nav .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td.ui-datepicker-other-month > span {
    color: var(--text-muted, #475569);
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Phase 4 dark-mode overrides
   localStorage key: q88_theme (UNDERSCORE), data-theme attribute on <body>
   Token bridge already done above via var(--token, fallback) — this block
   only handles cases where the dark token differs from the spec literal.
   -------------------------------------------------------------------------- */

/* Trigger .qDiv inherits dark via var(--input-background) bridge above —
   no extra rule needed unless a spec divergence appears. */

body.sidebar-nav[data-theme="dark"] .pnlCalQ88 {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px -1px rgba(0,0,0,0.40);
}

body.sidebar-nav[data-theme="dark"] .pnlCalQ88 .q88-cal-grid .ui-datepicker-calendar tbody td > a:hover {
    background: var(--accent, #2a2f3d);   /* darker hover bg in dark mode */
}

/* QEN-8953 — month/year chevrons on the dark card. The shared slate glyph is
   theme-invariant on purpose (it normally sits on a select that stays white in
   both themes), but these two triggers are transparent, so slate-600 lands on
   --surface-raised at 2.39:1 (Q88) / 1.94:1 (Milbros) — under WCAG 1.4.11's 3:1,
   on the one mark that says "this is a dropdown". Swap to the dark-surface pair;
   the shared --icon-chevron-*-fg-slate tokens are untouched, so no other select
   on the platform is affected. See the token comment in tokens.css. */
body.sidebar-nav[data-theme="dark"] .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-month,
body.sidebar-nav[data-theme="dark"] .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.ui-datepicker-year {
    background-image: var(--icon-chevron-down-fg-dark-secondary) !important;
}
body.sidebar-nav[data-theme="dark"] .pnlCalQ88 .q88-cal-grid .ui-datepicker-title select.q88-select--open {
    background-image: var(--icon-chevron-up-fg-dark-secondary) !important;
}

/* ==========================================================================
   AjaxControlToolkit CalendarExtender popup — same look as .pnlCalQ88

   /Controls/Calendar.ascx uses ajaxToolkit:CalendarExtender (different popup
   mechanism than CalendarControl.ascx). The widget mounts a fixed DOM with
   `.ajax__calendar` classes. Rather than porting all 7 Group 2 sites to the
   new control, we CSS-skin the AjaxToolkit calendar to match the new look.

   Scope: body.sidebar-nav + the CssClass="CalendarDisplay" wrapper. Inert
   wherever sidebar-nav isn't set, so legacy portals are unchanged.
   ========================================================================== */

body.sidebar-nav .CalendarDisplay {
    z-index: 9999999 !important;            /* over modal popups */
}

body.sidebar-nav .CalendarDisplay .ajax__calendar_container {
    width: 272px;
    padding: 12px;
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
}

/* Header: [prev] [title] [next] — AjaxToolkit emits prev/next/title as
   three sibling divs in source order; flexbox makes the title centered. */
body.sidebar-nav .CalendarDisplay .ajax__calendar_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-bottom: 8px;
    background: transparent;
    border: 0;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_header > div {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_header > div:nth-child(1) { order: 1; }   /* prev */
body.sidebar-nav .CalendarDisplay .ajax__calendar_header > div:nth-child(2) { order: 3; }   /* next */
body.sidebar-nav .CalendarDisplay .ajax__calendar_header > div:nth-child(3) {                /* title */
    order: 2;
    flex: 1;
    text-align: center;
}

body.sidebar-nav .CalendarDisplay .ajax__calendar_prev,
body.sidebar-nav .CalendarDisplay .ajax__calendar_next {
    width: 24px;
    height: 24px;
    background-color: var(--text-muted, #475569);
    background-image: none;                  /* kill AjaxToolkit sprite */
    cursor: pointer;
    border-radius: 4px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_prev {
    -webkit-mask-image: var(--icon-chevron-left);
            mask-image: var(--icon-chevron-left);
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_next {
    -webkit-mask-image: var(--icon-chevron-right);
            mask-image: var(--icon-chevron-right);
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_prev:hover,
body.sidebar-nav .CalendarDisplay .ajax__calendar_next:hover {
    background-color: var(--text-primary, #0f172a);
}

body.sidebar-nav .CalendarDisplay .ajax__calendar_title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    background: transparent;
    cursor: pointer;
}

/* Body — days grid.
   QEN-8865: `position`/`top`/`left` MUST be !important here (and on the
   months/years grids below). We flatten AjaxToolkit's animated calendar into
   a plain static-flow card, but the toolkit re-applies an INLINE
   `position:absolute; left:0; top:0` to the .ajax__calendar_days /
   _months / _years element every time the user navigates months (prev/next
   arrows) or opens the title month/year picker — that's its month-slide
   animation end state. An inline style outranks a non-!important rule, so the
   grid dropped out of flow, .ajax__calendar_body collapsed to height:0, and the
   whole popup lost its card box (transparent, overlapping the page). First
   open looked fine only because the toolkit hadn't set the inline style yet.
   !important keeps the grid in flow so the body keeps its height on every
   re-layout. */
body.sidebar-nav .CalendarDisplay .ajax__calendar_body {
    /* 100%, not the "272 card − 12×2 padding = 248" this used to say. That
       number was wrong two ways: the container is border-box with a 1px border,
       so where this file's 272px container does apply (Manage Account, Vessel
       Search) the content box is 246px and the body overhung by 2px; and where a
       page overrides the container — date-calculator.css forces `280px
       !important` — the body stayed at 248px inside 254.4px and sat 6px narrow.
       Neither showed a scrollbar, because components.css gives the container
       `overflow: hidden`, so the mismatch clipped or left a gap instead. 100%
       tracks whatever the container actually resolves to. */
    width: 100%;
    height: auto !important;
    background: transparent;
    border: 0;
    position: static !important;
    overflow: visible;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_days {
    width: 100%;
    height: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_days table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 18px;
    margin: 0 !important;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_dayname {
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #475569);
    background: transparent;
    border: 0;
    width: auto;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_body table td {
    padding: 1px;
    text-align: center;
    background: transparent;
    border: 0;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    padding: 0;
    border-radius: 6px;
    color: var(--text-primary, #0f172a);
    background: transparent;
    cursor: pointer;
    border: 0;
}
/* `--accent` resolves to dark navy on Q88 (--raw-q88-navy-dark) but a light
   muted tone on Milbros, so a hover fill of var(--accent) paired with the
   base --text-primary (dark) color made the hovered day's text unreadable
   on Q88 (dark text on dark bg). Same root cause as the .pnlCalQ88 hover
   fix above (QEN-8801) — use the same light, portal-aware brand tint
   instead of --accent so --text-primary stays readable on every portal. */
body.sidebar-nav .CalendarDisplay .ajax__calendar_body table td:hover .ajax__calendar_day,
body.sidebar-nav .CalendarDisplay .ajax__calendar_hover .ajax__calendar_day {
    background: rgba(var(--primary-tint), 0.08);
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_today .ajax__calendar_day {
    border: 1px solid var(--primary);
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_active .ajax__calendar_day,
body.sidebar-nav .CalendarDisplay .ajax__calendar_active:hover .ajax__calendar_day {
    background: var(--primary) !important;
    color: var(--text-on-brand, #ffffff) !important;
    border: 0;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_other .ajax__calendar_day {
    color: var(--text-muted, #475569);
    opacity: 0.5;
}

/* Months / Years grid (when clicking title) — same general treatment.
   !important on position/top/left/height for the same reason as the days grid
   above: the toolkit sets an inline `position:absolute` on these when the title
   month/year picker opens, which otherwise collapses the card. */
body.sidebar-nav .CalendarDisplay .ajax__calendar_months,
body.sidebar-nav .CalendarDisplay .ajax__calendar_years {
    background: transparent;
    border: 0;
    width: 100%;
    height: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_month,
body.sidebar-nav .CalendarDisplay .ajax__calendar_year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 6px;
    color: var(--text-primary, #0f172a);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_months table td:hover .ajax__calendar_month,
body.sidebar-nav .CalendarDisplay .ajax__calendar_years table td:hover .ajax__calendar_year,
body.sidebar-nav .CalendarDisplay .ajax__calendar_hover .ajax__calendar_month,
body.sidebar-nav .CalendarDisplay .ajax__calendar_hover .ajax__calendar_year {
    /* --surface-hover, not --accent — the month/year grid was missed when the
       day-cell hover above was fixed, so it still painted the dark brand colour
       under dark text. Neutral here rather than the day cells' brand tint: these
       have no "selected vs hovered" ambiguity to disambiguate. */
    background: var(--surface-hover, #f1f5f9);
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_active .ajax__calendar_month,
body.sidebar-nav .CalendarDisplay .ajax__calendar_active .ajax__calendar_year {
    background: var(--primary) !important;
    color: var(--text-on-brand, #ffffff) !important;
}

/* Footer: "Today" link */
body.sidebar-nav .CalendarDisplay .ajax__calendar_footer {
    background: transparent;
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_today {
    color: var(--text-link);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 15px;
}
body.sidebar-nav .CalendarDisplay .ajax__calendar_today:hover {
    text-decoration: underline;
}

/* Hide the legacy sprite/background-image set by AjaxToolkit on day cells */
body.sidebar-nav .CalendarDisplay [class*="ajax__calendar_"]:not(.ajax__calendar_prev):not(.ajax__calendar_next) {
    background-image: none;
}

/* Dark-mode overrides */
body.sidebar-nav[data-theme="dark"] .CalendarDisplay .ajax__calendar_container {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px -1px rgba(0,0,0,0.40);
}
body.sidebar-nav[data-theme="dark"] .CalendarDisplay .ajax__calendar_body table td:hover .ajax__calendar_day {
    background: var(--accent, #2a2f3d);
}