/* ==========================================================================
   Create Questionnaire page — Figma Q88-Specs node 237:14442
   Scoped via the unique module container id suffix (modQSelect_divMod) so
   shared .StdTable / .Label / .modTitle classes remain untouched elsewhere.
   ========================================================================== */

body.sidebar-nav [id$="modQSelect_divMod"].modContainerStd {
    background: #ffffff;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 48px;
    /* Card renders as <table> — width:auto makes it shrink-wrap. Force full width
       so it fills the content pane to match Figma's full-bleed card. */
    width: calc(100% - 96px) !important;
    max-width: none !important;
    table-layout: fixed;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

/* The card's parent TD should not add its own background or padding */
body.sidebar-nav [id$="modQSelect_divMod"].modContainerStd > tbody > tr > td {
    padding: 0 !important;
}

/* Break the DNN content pane width constraint so the card fills the content
   area next to the sidebar. Scoped by the sidebar-nav body class + presence
   of modQSelect_divMod so only this page is affected. */
body.sidebar-nav:has([id$="modQSelect_divMod"]) .ContentPane,
body.sidebar-nav:has([id$="modQSelect_divMod"]) .ContentPaneBody,
body.sidebar-nav:has([id$="modQSelect_divMod"]) #ctl00_cphMiddle,
body.sidebar-nav:has([id$="modQSelect_divMod"]) #cphMiddle_ctl00_divWrap {
    width: 100% !important;
    max-width: none !important;
}

/* Bathymetric contour background now lives in components.css as a global
   rule (body.sidebar-nav .q88-content::before). Page-level transparency for
   DNN ContentPane is also handled globally there. */

/* --------------------------------------------------------------------------
   Module header: "Create Questionnaire" title + optional search link (right)
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .modTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px 0;
    border: 0;
    background: transparent;
}

body.sidebar-nav [id$="modQSelect_divMod"] .modTLeft {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-primary);
    padding: 0;
    background: transparent;
    border: 0;
}

body.sidebar-nav [id$="modQSelect_divMod"] .modTRight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Secondary Search link (left of Create) — plain text link in teal */
body.sidebar-nav [id$="modQSelect_divMod"] .modTRight a.SearchLink,
body.sidebar-nav [id$="modQSelect_divMod"] .modTRight a[id$="_lnkSearchQuestionnaire"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] .modTRight a.SearchLink:hover,
body.sidebar-nav [id$="modQSelect_divMod"] .modTRight a[id$="_lnkSearchQuestionnaire"]:hover {
    text-decoration: underline !important;
}

/* Hide the Search icon image inside the secondary link, keep label */
body.sidebar-nav [id$="modQSelect_divMod"] .modTRight a.SearchLink img {
    display: none;
}

/* --------------------------------------------------------------------------
   modMain + inner form section
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .modMain {
    padding: 0;
    background: transparent;
    border: 0;
}

body.sidebar-nav .modMain {
    padding-bottom: var(--raw-space-6);
}

body.sidebar-nav [id$="modQSelect_divMod"] .modInnerContainer {
    padding: 0;
    background: transparent;
    border: 0;
}

/* --------------------------------------------------------------------------
   Section heading — Figma "Vessel context" / "Questionnaire template" labels
   Inter Bold 16/24 #0f172a, sits above each grid section.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .q88-section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    padding: 0;
}

/* The second heading (Questionnaire template) sits below the field-grid's
   bottom border — give it a top margin so it doesn't hug the divider. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid + .q88-section-title {
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Top field grid — 3 columns: Fleet | Vessel | Loadline OR CargoHistory
   Figma node 237:14442 places three field groups side-by-side, each a label
   stacked above an input with 6px gap. The ASCX emits FleetVessel1 as two
   sibling <select>s (dlFleet, dlVessel); we position them explicitly in the
   grid so the "Fleet" and "Vessel" labels above each have a clean visual
   pairing, without splitting the FleetVessel user control.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid {
    display: grid;
    /* minmax(0, 1fr) prevents grid tracks from expanding to the intrinsic max
       width of a <select> with long option labels (which pushed each column to
       the full row width, stacking fields on top of each other). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 16px;
    align-items: start;
    margin: 0 0 16px 0;
    padding: 0 0 24px 0;
    border-bottom: 1px solid var(--border-default);
}

/* Row 1 — the three column labels */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > .q88-grid-label-fleet {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
    margin: 0 !important;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > .q88-grid-label-vessel {
    grid-column: 2;
    grid-row: 1;
    padding: 0 !important;
    margin: 0 !important;
}

/* Loadline + CargoHistory each live on their own row in column 1 of the grid.
   When trLoadline is hidden (no loadlines for the selected vessel), grid auto-
   placement collapses the empty row and trCargoHistory promotes from row 4 → 3.
   When trCargoHistory is hidden, the row simply doesn't render. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > .q88-field-row {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-top: 6px;
}

body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > .q88-field-row .Label {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 20px !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > .q88-field-row select {
    width: 100%;
    margin: 0 !important;
}

/* Row 2 — the Fleet + Vessel dropdowns rendered by FleetVessel1 user control.
   Positioned explicitly so they land directly under their respective labels. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > select[id$="_dlFleet"] {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > select[id$="_dlVessel"] {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
}

/* Validator span emitted by FleetVessel1 — place under the Vessel column so it
   doesn't collide with the third-column cell (error shows only on invalid submit).
   Re-skin: legacy ValHighlight (MainWhiteout.css:1572) paints a yellow stripe with
   alertVal.png + uppercase red "*" text — replaced with a Lucide AlertCircle (red)
   + "Please select a vessel" message via ::before/::after. The validator's
   ErrorMessage is "*" which we hide with font-size:0 on the host span; the ::after
   pseudo restores 13px for the message text. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > span[id$="_rfvdlVessel"] {
    grid-column: 2;
    grid-row: 3;
    /* No `!important` on display — ASP.NET Display="Dynamic" emits inline
       style="display:none;" until validation fails, and our `inline-flex`
       would otherwise force the error visible on initial page load. Without
       !important the inline style wins while hidden; once the framework
       strips display:none on submit failure, this rule applies. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 0;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #dc2626 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    white-space: normal !important;
    justify-self: start;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > span[id$="_rfvdlVessel"]::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #dc2626;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / 14px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / 14px;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-field-grid > span[id$="_rfvdlVessel"]::after {
    content: "Please select a vessel";
    font-size: 13px;
    line-height: 20px;
    color: #dc2626;
    font-weight: 500;
}

/* QuestionnaireSelector validators (rfvQuestionnaireType + rfvQuestionnaire)
   emit ErrorMessage as an inline <img class="ValImage" src="/images/icons/alertVal.png"
   title="...">; CssClass="ValRequiredField" has no base rule, but MainWhiteout.css's
   .ValImage rule paints the bitmap (deprecated). Re-skin: swap the legacy yellow
   triangle for a 14px Lucide AlertCircle (red) via CSS `content:` swap; the host
   span loses its uppercase red chrome and renders the swapped icon next to a
   per-validator message via ::after. */
body.sidebar-nav [id$="modQSelect_divMod"] span.ValRequiredField {
    /* No `!important` on display — see the rfvdlVessel rule above for
       rationale. Display="Dynamic" validators carry inline style="display:none;"
       until they fail; !important here would force the error visible on
       initial page load. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 8px;
    color: var(--red-600) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    vertical-align: middle;
}
body.sidebar-nav [id$="modQSelect_divMod"] span.ValRequiredField img.ValImage {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}
/* Per-validator message text (appended via ::after on the span). The
   Questionnaire Name field has THREE chained validators (cvQuestionnaire +
   rfvQuestionnaire from QuestionnaireSelector.ascx, plus ComboBox.ascx's
   internal `cv`), all with CssClass="ValRequiredField"; without scoping,
   each duplicate the message text. We attach the message only to the
   *first* `.ValRequiredField` sibling next to a field and hide subsequent
   siblings entirely (their messages would be identical from the user's
   point of view: "please choose a valid questionnaire"). The icon stays
   on the first via the img.ValImage swap above. */
body.sidebar-nav [id$="modQSelect_divMod"] span[id$="_rfvQuestionnaire"]::after,
body.sidebar-nav [id$="modQSelect_divMod"] span[id$="_cvQuestionnaire"]::after {
    content: "Please select a questionnaire";
    color: var(--red-600);
}
/* Hide any subsequent .ValRequiredField siblings — the first carries the
   message; subsequent duplicates would only add visual noise. Uses general
   sibling combinator so the rule applies regardless of how many siblings
   the framework emits. */
body.sidebar-nav [id$="modQSelect_divMod"] span.ValRequiredField ~ span.ValRequiredField {
    display: none !important;
}

/* CargoHistory "Not Activated" inline note — small muted text below the dropdown */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-cargo-not-activated {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-cargo-not-activated a {
    color: var(--primary);
    text-decoration: none;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-cargo-not-activated a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Remaining form table (trSearch + trQuestionnaire + note row).
   Each <tr>/<td> flattened to block so labels sit above their inputs.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder,
body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder > tbody {
    display: block;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 16px 0 0 0;
    padding: 0;
}

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder > tbody > tr {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder > tbody > tr:last-child {
    margin-bottom: 0;
}

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 0;
    vertical-align: top;
    background: transparent;
    border: 0;
}

/* Label sits above the input with a 6px gap (Figma "Field Content" spacing) */
body.sidebar-nav [id$="modQSelect_divMod"] .StdTable .Label,
body.sidebar-nav [id$="modQSelect_divMod"] td.Label {
    display: block !important;
    width: 100% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    white-space: normal;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
    background: transparent;
    text-align: left !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable .Label span,
body.sidebar-nav [id$="modQSelect_divMod"] .StdTable .Label label,
body.sidebar-nav [id$="modQSelect_divMod"] td.Label span,
body.sidebar-nav [id$="modQSelect_divMod"] td.Label label {
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 20px !important;
}

/* Inputs sit directly under their label — no extra horizontal padding */
body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder > tbody > tr > td:not(.Label) {
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Inputs / selects — match Figma "Type=Input, State=Default"
   h:32px, border #e2e8f0, radius 8, px 12 py 4, Inter 14/20
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] select,
body.sidebar-nav [id$="modQSelect_divMod"] input[type="text"],
body.sidebar-nav [id$="modQSelect_divMod"] input[type="search"],
body.sidebar-nav [id$="modQSelect_divMod"] .NormalTextBox,
body.sidebar-nav [id$="modQSelect_divMod"] .NormalBox {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-primary) !important;
    height: 32px !important;
    min-height: 32px;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Read-only mode: the `qDivRo` wrapper signals "this questionnaire is in
   read-only mode" — but the FIELDS STAY EDITABLE. Server doesn't persist
   any value the user types here (per VesselPermission == Read), yet the
   typed value IS used when generating the rendered form output (PDF).
   Therefore: gray surface for visual "muted" cue, but no `pointer-events:
   none` and no `opacity` — the user can still focus + type. The input
   children are `background: transparent` (see block A of questionnaire.css)
   so the wrapper's solid gray paints right up to the inner edge of the
   1px border. */
body.sidebar-nav .qDivRo,
body.sidebar-nav [id$="modQSelect_divMod"] .qDivRo select,
body.sidebar-nav [id$="modQSelect_divMod"] .qDivRo input[type="text"],
body.sidebar-nav [id$="modQSelect_divMod"] .qDivRo input[type="search"],
body.sidebar-nav [id$="modQSelect_divMod"] .qDivRo .NormalTextBox,
body.sidebar-nav [id$="modQSelect_divMod"] .qDivRo .NormalBox {
    background-color: var(--muted) !important;
    color: var(--muted-foreground) !important;
}
body.sidebar-nav .qDivRo * {
    color: var(--muted-foreground) !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] select,
body.sidebar-nav [id$="modQSelect_divMod"] select.NormalTextBox,
body.sidebar-nav [id$="modQSelect_divMod"] select.NormalBox {
    /* Kill the native arrow — legacy Q88 skin CSS sets appearance:auto with
       enough specificity to win against a plain class selector, so use
       !important here. The replacement chevron is drawn via background-image.
       Mirrors the cbArrow rule's `.NormalTextBox.cbArrow` defensive selector
       (FleetVessel.ascx renders dlFleet/dlVessel with class="NormalTextBox",
       which beats the bare `select` selector on specificity and would
       otherwise leave padding-right at 12px from the base input rule, causing
       text to overlap the chevron on long option labels). */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
}

/* IE-era pseudo-element for the native expand arrow on some legacy engines */
body.sidebar-nav [id$="modQSelect_divMod"] select::-ms-expand {
    display: none !important;
}

/* --------------------------------------------------------------------------
   ComboBox arrow — cbQuestionnaire renders as an <input type="text"> with the
   legacy .cbArrow class that paints an old dropdown-arrow PNG as background.
   Override with the same chevron SVG used for <select> so the ComboBox visually
   matches the Figma "InputGroup with ChevronDown" pattern.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] input.cbArrow,
body.sidebar-nav [id$="modQSelect_divMod"] input.NormalTextBox.cbArrow {
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    background-color: #ffffff !important;
    cursor: pointer;
}

body.sidebar-nav [id$="modQSelect_divMod"] select:focus,
body.sidebar-nav [id$="modQSelect_divMod"] input[type="text"]:focus,
body.sidebar-nav [id$="modQSelect_divMod"] input[type="search"]:focus,
body.sidebar-nav [id$="modQSelect_divMod"] .NormalTextBox:focus,
body.sidebar-nav [id$="modQSelect_divMod"] .NormalBox:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15);
}

body.sidebar-nav [id$="modQSelect_divMod"] select::placeholder,
body.sidebar-nav [id$="modQSelect_divMod"] input::placeholder {
    color: #475569;
}

/* FleetVessel control renders two selects side-by-side */
body.sidebar-nav [id$="modQSelect_divMod"] #ctl00_cphMiddle_ctl00_modQSelect_FleetVessel1_dlFleet,
body.sidebar-nav [id$="modQSelect_divMod"] #ctl00_cphMiddle_ctl00_modQSelect_FleetVessel1_dlVessel {
    margin-right: 8px;
    min-width: 180px;
}

/* QuestionnaireSelector: ddlQuestionnaireType + cbQuestionnaire textbox.
   Default min-widths used when the selector renders OUTSIDE the q88-template-cell
   grid (legacy fallback). Inside the grid these are overridden below. */
body.sidebar-nav [id$="modQSelect_divMod"] [id$="_ddlQuestionnaireType"],
body.sidebar-nav [id$="modQSelect_divMod"] [id$="_ddlQuestionnaire"],
body.sidebar-nav [id$="modQSelect_divMod"] [id$="_cbQuestionnaire"] {
    min-width: 222px;
    margin-right: 12px;
}

body.sidebar-nav [id$="modQSelect_divMod"] [id$="_cbQuestionnaire"] {
    min-width: 260px;
}

/* --------------------------------------------------------------------------
   Questionnaire template row — Type / Questionnaire Name laid out in the same
   3-column grid as the Vessel context grid above, so dropdowns align column-
   for-column with Fleet / Vessel / Loadline. Hides the legacy "Questionnaire:"
   label cell (replaced by inline "Type" + "Questionnaire Name" labels).
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] tr.q88-template-row > td.q88-tplabel-cell {
    display: none !important;
}
body.sidebar-nav [id$="modQSelect_divMod"] tr.q88-template-row .q88-template-cell [id$="_lblQuestionnaire"] {
    display: none !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] tr.q88-template-row > td.q88-template-cell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
    padding: 0 !important;
    width: 100% !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > .q88-tplabel-type,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > .q88-tplabel-name {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 20px !important;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > .q88-tplabel-type {
    grid-column: 1;
    grid-row: 1;
}
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > .q88-tplabel-name {
    grid-column: 2;
    grid-row: 1;
}

/* Type dropdown → column 1, row 2 */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell [id$="_ddlQuestionnaireType"] {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Questionnaire Name combobox / dropdown → column 2, row 2.
   ComboBox.ascx renders the actual input as ..._cbQuestionnaire_txtComboBox
   (the user control itself doesn't emit a wrapper element). Position both the
   autocomplete textbox and the fallback ddlQuestionnaire in the same cell. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell [id$="_cbQuestionnaire_txtComboBox"],
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell [id$="_ddlQuestionnaire"] {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Multi-value "+" link and suffix label aren't used here (EnableMultiValue=false);
   keep them out of the grid flow. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell [id$="_cbQuestionnaire_hlkAdd"],
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell [id$="_cbQuestionnaire_lblSuffix"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   "Questionnaires" section divider: note text + alias note
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .StdTable.NoBorder + br,
body.sidebar-nav [id$="modQSelect_divMod"] .modMain > br {
    display: none;
}

/* Alias note beneath the Questionnaire selector — Figma places this directly
   under the search row, left-aligned with the selector, in muted 14/20 text. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-alias-note {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    margin-top: 12px;
    padding: 0;
    text-align: left;
}

/* Inside the q88-template-cell grid, the alias note spans both label columns
   so it sits cleanly under the inputs instead of squeezing into column 1.
   Pushed to row 4 so the validator span(s) for the Questionnaire Name field
   (cvQuestionnaire / rfvQuestionnaire / ComboBox's internal `cv`) can claim
   row 3 directly under the Name dropdown — matches the vessel-validator
   placement under the Vessel dropdown in q88-field-grid. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > .q88-alias-note {
    grid-column: 1 / span 2;
    grid-row: 4;
    margin-top: 0;
}

/* Position the Questionnaire Name validators in row 3 column 2 (directly
   under the cbQuestionnaire / ddlQuestionnaire input in row 2 column 2).
   All three validators (cvQuestionnaire, rfvQuestionnaire, plus ComboBox's
   internal `cv`) share grid-column:2 grid-row:3, and the
   `.ValRequiredField ~ .ValRequiredField { display:none }` rule below
   keeps only the first one visible, so they stack into the same cell. */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > span[id$="_cvQuestionnaire"],
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > span[id$="_rfvQuestionnaire"],
body.sidebar-nav [id$="modQSelect_divMod"] .q88-template-cell > span[id$="_cbQuestionnaire_cv"] {
    grid-column: 2;
    grid-row: 3;
    margin: 4px 0 0 0 !important;
    justify-self: start;
}

/* --------------------------------------------------------------------------
   Primary Create button — teal (Figma base/primary #0d9488)
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"],
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"]:link,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"]:visited,
body.sidebar-nav a[id$="modQSelect_btnCreate"].LinkButton,
body.sidebar-nav a[id$="modQSelect_btnCreate"]:link,
body.sidebar-nav a[id$="modQSelect_btnCreate"]:visited,
body.sidebar-nav a[id$="modQSelect_btnCreate"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 150ms ease, border-color 150ms ease;
    margin-top: 16px;
    text-shadow: none !important;
}

body.sidebar-nav a[id$="modQSelect_btnCreate"]:hover,
body.sidebar-nav a[id$="modQSelect_btnCreate"]:focus,
body.sidebar-nav a[id$="modQSelect_btnCreate"]:active {
    background: var(--button-primary-hover) !important;
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

body.sidebar-nav a[id$="modQSelect_btnCreate"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25);
}

/* Disabled state */
body.sidebar-nav a[id$="modQSelect_btnCreate"][disabled],
body.sidebar-nav a[id$="modQSelect_btnCreate"].aspNetDisabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Hide the Continue icon + the empty <ins>&nbsp;</ins> wrapper that
   ImageManager injects inside btnCreate — the Figma primary button is
   text-only on teal, and the empty <ins> would shift "Create" off-center. */
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"] img,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"] ins {
    display: none !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_btnCreate"] {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Footer button row — Search (secondary) + Create (primary), right-aligned.
   Buttons live in the modQSelect Footer2 slot per Figma node 1:16071.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

/* Secondary "Search" button — gray bg, dark text, same h:36/r:8 as Create */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a[id$="_lnkSearchQuestionnaire"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    background-image: none !important;
    color: #171717 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 150ms ease, border-color 150ms ease;
}

body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink:hover,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a[id$="_lnkSearchQuestionnaire"]:hover,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink:focus,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a[id$="_lnkSearchQuestionnaire"]:focus {
    background: #e5e5e5 !important;
    background-color: #e5e5e5 !important;
    color: #171717 !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25);
}

/* ImageManager wraps the label in <ins>&nbsp;</ins> + <img> + label —
   the Figma footer Search button is text-only, so hide the icon and the
   spacer. (Mirrors the same trick used for btnCreate.) */
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink img,
body.sidebar-nav [id$="modQSelect_divMod"] .q88-footer-actions a.SearchLink ins {
    display: none !important;
}

/* Footer note — one line with muted text + hidden PDF trigger */
body.sidebar-nav [id$="modQSelect_divMod"] .modFooterNote {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    background: transparent;
}

body.sidebar-nav [id$="modQSelect_divMod"] .modFooterNoteText {
    font-size: 14px;
    color: #475569;
}

/* Keep hidden PDF trigger out of the visual flow */
body.sidebar-nav a[id$="modQSelect_lnkDownloadPDF"] {
    display: none !important;
}

/* Strip the default modFooter2 chrome (gray bg + padding) from Q88Whiteout */
body.sidebar-nav [id$="modQSelect_divMod"] [id$="_pnlFooter2"],
body.sidebar-nav [id$="modQSelect_divMod"] .modFooter2 {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Search-questionnaire link form (LinkButton "Search" + Cancel) — hide "Not
   Activated" legacy red styling, match Figma muted tone
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="modQSelect_divMod"] [id$="_lblCargoHistoryNotActivated"] {
    color: #475569 !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

body.sidebar-nav [id$="modQSelect_divMod"] [id$="_lblCargoHistoryNotActivated"] a {
    color: var(--text-link);
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
}

/* Inline "Search" + "Cancel" LinkButtons shown when trSearch is visible.
   Flatten the legacy .LinkButton pill styling into plain teal text links. */
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearch"],
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearchCancel"] {
    display: inline !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 4px !important;
    margin: 0 4px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-link) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    line-height: 20px !important;
    vertical-align: middle;
}

body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearch"]:hover,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearchCancel"]:hover {
    text-decoration: underline !important;
    color: var(--link-hover) !important;
}

/* Cancel is a secondary action — render in muted color */
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearchCancel"] {
    color: #475569 !important;
}

body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearchCancel"] ins,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearchCancel"] img,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearch"] ins,
body.sidebar-nav [id$="modQSelect_divMod"] a[id$="_lnkSearch"] img {
    display: none !important;
}

/* The inline "Search" textbox needs to match the other inputs */
body.sidebar-nav [id$="modQSelect_divMod"] input[id$="_txtSearch"] {
    width: 260px !important;
    margin-right: 8px;
    vertical-align: middle;
}

/* Keep the "|" separator between Search and Cancel aligned */
body.sidebar-nav [id$="modQSelect_divMod"] [id$="_trSearch"] td {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Autocomplete suggestion list (QuestionnaireSelector)
   Figma shows these as "Select Menu / Item" rows: 1px border, radius 6, pad
   pl-2 pr-8 py-1.5, hover accent bg.
   -------------------------------------------------------------------------- */

body.sidebar-nav .AutoCompleteExtender_CompletionList.cbACList {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
}

body.sidebar-nav .AutoCompleteExtender_CompletionListItem {
    padding: 6px 32px 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #000000;
    cursor: pointer;
    line-height: 20px;
}

body.sidebar-nav .AutoCompleteExtender_CompletionListItem:hover,
body.sidebar-nav .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_CompletionListItemHover {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
}

/* AutoCompleteExtender *swaps* .AutoCompleteExtender_CompletionListItem for
   .AutoCompleteExtender_HighlightedItem on hover (see ComboBox.ascx:
   CompletionListHighlightedItemCssClass) — they're mutually exclusive, not
   stacked. If we don't mirror every size-affecting property here, the hovered
   row falls back to the legacy MainWhiteout.css rule (padding:2px; width:175px),
   shrinks, drops out from under the cursor, swaps back, and trembles. Keep
   these properties in sync with the default-state rule above. Mirrors the fix
   in blankQuestionnaire.css:239-248. */
body.sidebar-nav .AutoCompleteExtender_HighlightedItem,
body.sidebar-nav .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_HighlightedItem {
    padding: 6px 32px 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #000000;
    cursor: pointer;
    line-height: 20px;
    width: auto;
    background-color: #f1f5f9;
}

body.sidebar-nav .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_CompletionListItemSelected {
    background-color: #e2e8f0;
    border-color: #e2e8f0;
}

/* QEN-8656 — the questionnaire question-hint icon intentionally stays the BLACK
   CircleHelp glyph at 16px (matches the question-label body text), opting OUT of
   the global slate-500/14px Help swap in components.css. `content: url(...)` on
   the <img class='Img-Std Img-Std-HelpSmall'> (rendered by
   CreateQuestionnaire.ascx.cs:2036 inside <a id='lnkHelpText'>) replaces its
   rendered raster outright. We also neutralise the global rule's mask + slate
   fill here (mask:none, background-color:transparent) so only the black content
   glyph paints. components.css loads first (Default.master.cs:245 < :294), so
   these equal-specificity !important declarations win. Margin-left gives the
   icon breathing room from the trailing question-code "(9.11.6)" text. */
body.page-questionnaire img.Img-Std-HelpSmall {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    background-image: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat;
    -webkit-mask: none !important;
            mask: none !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 4px;
    vertical-align: middle;
}

/* QEN-8656 + QEN-8776 — swap the legacy conditional-icon rasters
   (/images/icons/officerMatrix2.png, loadline.png, vetting.png) rendered by
   CreateQuestionnaire.ascx.cs (:2172–:2230) and GenerateQuestionnaire.cs as
   <img class='qImConditionalIcon'> inside the row's fifth-column anchor for
   crisp Lucide glyphs that match the status-toolbar legend EXACTLY
   (questionnaire.css :1798–:1811 — Officer Matrix → user-star, Loadline →
   ruler, Vetting → file-check; all painted slate-900 #0f172a). Previously only
   Officer Matrix was swapped — and to the WRONG glyph (plain Lucide `user`
   instead of the legend's `user-star`); Vetting + Loadline still rendered their
   legacy PNGs, so the in-row icons did not match the legend. `content: url(...)`
   on a replaced <img> overrides the rendered raster outright — no codebehind
   touch required. Per-src `[src$="...png"]` selectors keep the three icons
   independent. The legacy visibility logic (MainWhiteout.css :3427 / :3433 —
   hover-on-`.qTbl tr` and always-on for `.rF` rows) is preserved because we only
   swap the rendered image, not the visibility cascade. */
body.page-questionnaire img.qImConditionalIcon[src$="officerMatrix2.png"],
body.page-questionnaire img.qImConditionalIcon[src$="loadline.png"],
body.page-questionnaire img.qImConditionalIcon[src$="vetting.png"] {
    /* MainWhiteout.css `.qImConditionalIcon` (line 3439) sets
       `background-position: -96px -48px` against a legacy sprite. Without
       clearing `background-image`, a faint sprite tile renders behind our SVG.
       Longhand `background-*:` declarations (not the `background:` shorthand)
       to avoid the css-shorthand-var-important-parser-trap noted in MEMORY. */
    background-image: none !important;
    background-color: transparent;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    /* QEN-8801 — the legacy rasters are 24x19/24x18; if the `content:`
       replacement ever fails to apply (CSS still loading, print view) the
       PNG would be squashed into the forced 16x16 box. `contain` keeps the
       aspect ratio for both the raster fallback and the swapped SVG. */
    object-fit: contain;
    vertical-align: middle;
}

/* Officer Matrix → Lucide user-star (matches the legend's --officer-matrix chip) */
body.page-questionnaire img.qImConditionalIcon[src$="officerMatrix2.png"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 21v-1a4 4 0 0 1 4-4'/><path d='M17.8 22 16 20.5l-1.8 1.5.7-2.4-1.9-1.6h2.4l.8-2.3.8 2.3h2.4l-1.9 1.6Z'/><circle cx='10' cy='8' r='5'/></svg>");
}

/* Loadline → Lucide ruler (matches the legend's --loadline chip) */
body.page-questionnaire img.qImConditionalIcon[src$="loadline.png"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/><path d='m14.5 12.5 2-2'/><path d='m11.5 9.5 2-2'/><path d='m8.5 6.5 2-2'/><path d='m17.5 15.5 2-2'/></svg>");
}

/* Vetting → Lucide file-check (matches the legend's --vetting chip) */
body.page-questionnaire img.qImConditionalIcon[src$="vetting.png"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/><polyline points='14 2 14 8 20 8'/><path d='m9 15 2 2 4-4'/></svg>");
}

/* --------------------------------------------------------------------------
   Question-row hover — align with the standard refresh grid row hover
   (QEN-8801 "Remove shaded bottom-border on question hover")

   Legacy Main.css:1730 / MainWhiteout.css paint `.qTbl tr:hover td` with a
   1px top+bottom border (#e7e7e7 / var(--border-subtle)) — the "shaded
   bottom-border" the stakeholder flagged. Refresh grids hover with a flat
   background tint instead (grid.css `--q88-grid-row-hover` #f8fafc on
   .dxgvDataRow:hover).

   The base `.qTbl td` rule keeps its always-on 1px transparent-looking
   borders (var(--surface-card)), so forcing the hover border COLORS to
   transparent (not removing the borders) keeps the box size identical and
   avoids any 1px row jump.

   Exclusions mirror legacy intent:
   - .noH / .qTypeN / .qTypeI — rows that deliberately suppress hover
   - .qTypeH — section-header band (keeps its slate band + subtle borders)
   - .rF — the focused row keeps its blue focus background
   Scope: body.sidebar-nav (this file loads globally; .qTbl only renders on
   questionnaire-family pages).
   -------------------------------------------------------------------------- */
body.sidebar-nav .qTbl tr:hover:not(.noH, .qTypeN, .qTypeI, .qTypeH, .rF) td {
    background-color: var(--q88-grid-row-hover, #f8fafc);
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Comments — refresh-consistent polish (QEN-8801 "Refine the comments design")

   `.qC` is the saved-comment click-to-edit display under an answer
   (Main.css:1720). Under the refresh it still rendered legacy navy
   (#4f72a4 via MainWhiteout `body[data-portal="q88"] .qC { color:
   var(--brand-primary) }`) with a hard-coded 300px width + horizontal
   scrollbar for long comments. Conservative polish only:
   - colour → brand content-link (the element is interactive: click opens
     the comment editor), matching the global refresh link colour
   - drop the fixed 300px box; let the comment use the answer column and
     wrap instead of growing an inner horizontal scrollbar
   - 4px gap between the answer control and the comment line
   Italic stays — it is the established "this is a comment" signature
   (shared with read-only .qCRo). The comment icon (.qImC) and the editor
   textarea (.qCF) are already re-skinned in questionnaire.css.
   Specificity (0,3,1) beats MainWhiteout's portal rule (0,2,1).
   -------------------------------------------------------------------------- */
body.sidebar-nav.page-questionnaire .qC {
    color: var(--link);
    width: auto;
    max-width: 100%;
    overflow-x: visible;
    overflow-wrap: anywhere;
    margin-top: 4px;
}

/* Comment editor textarea (.qCF) — dynamically appended by
   createCommentBox in script.js:2373 when the user clicks the comment
   icon (.qImC) next to an answer field. It's inserted as a sibling
   AFTER the answer's .qDiv (or after an existing .qC display div), so
   without a top margin its outline butts against the answer input.
   8px breathing room so the textarea's outline reads as clearly
   separated from the OG input above. */
body.sidebar-nav.page-questionnaire textarea.qCF {
    margin-top: var(--raw-space-4);
}

/* Read-only twin (.qCRo, ViewQuestionnaire) — same box fix, keeps its
   muted grey text from MainWhiteout. */
body.sidebar-nav.page-questionnaire .qCRo {
    width: auto;
    max-width: 100%;
    overflow-x: visible;
    overflow-wrap: anywhere;
}