/* ==========================================================================
   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;
}

/* /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);
}

body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel:hover {
    background: var(--accent, #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;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-close:hover {
    background: var(--accent, #f1f5f9);
    color: var(--text-primary, #0f172a);
}

/* Grid mount point — jQuery UI datepicker root will be appended here. */
body.sidebar-nav .pnlCalQ88 .q88-cal-grid {
    display: block;
    width: 272px;                  /* 304 card − 16×2 padding */
    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;
}

/* 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;
}
body.sidebar-nav .pnlCalQ88 .q88-cal-btn-cancel:hover {
    background: var(--accent, #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 {
    width: 272px;
    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);
}

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 */
}

/* ==========================================================================
   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 {
    width: 248px;                            /* 272 card − 12×2 padding */
    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 {
    background: var(--accent, #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);
}