/* ==========================================================================
   blankQuestionnaire.css — Page-scoped skin for BlankQuestionnaire.aspx

   Scope: body.sidebar-nav .q88-blank-questionnaire
   Applies the Phase-2 Figma "Type=Input, State=Default" look to the single
   combobox + download button on the BlankQuestionnaire module. Follows the
   same pattern as createQuestionnaire.css so page-level style changes don't
   leak into the 40+ legacy ModuleTemplate pages.

   NOTE: This file mirrors the combobox subset of createQuestionnaire.css
   (lines ~330-410). Keep the two in sync until we extract a shared refresh
   mixin (tracked as a future cleanup with the ModuleTemplate refresh work).
   ========================================================================== */

body.sidebar-nav .q88-blank-questionnaire {
    /* Reset the legacy ModuleTemplate chrome (fieldset border, yellow bg)
       — we want flat card-style layout like the refreshed Create page. */
    padding: 24px;
    background: #ffffff;
    border: 0;
    max-width: 640px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.sidebar-nav .q88-blank-questionnaire h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #0f172a;
    margin: 0 0 16px 0;
    padding: 0;
    border: 0;
    background: none;
}

body.sidebar-nav .q88-blank-questionnaire label,
body.sidebar-nav .q88-blank-questionnaire span[id$="_lblBlankQuestionnaire"] {
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    margin-right: 8px;
}

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

body.sidebar-nav .q88-blank-questionnaire input[type="text"],
body.sidebar-nav .q88-blank-questionnaire input[type="search"],
body.sidebar-nav .q88-blank-questionnaire .NormalTextBox {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 20px;
    color: #0f172a !important;
    height: 32px !important;
    min-height: 32px;
    padding: 4px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Replace the legacy .cbArrow PNG background with the same chevron SVG the
   refreshed Create page uses. Matches Figma "InputGroup with ChevronDown". */
body.sidebar-nav .q88-blank-questionnaire input.cbArrow,
body.sidebar-nav .q88-blank-questionnaire 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 .q88-blank-questionnaire input[type="text"]:focus,
body.sidebar-nav .q88-blank-questionnaire input[type="search"]:focus,
body.sidebar-nav .q88-blank-questionnaire .NormalTextBox:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15);
}

/* --------------------------------------------------------------------------
   Download button — match the "primary" button style from the refreshed skin
   -------------------------------------------------------------------------- */

body.sidebar-nav .q88-blank-questionnaire input[type="submit"].LinkButton,
body.sidebar-nav .q88-blank-questionnaire .LinkButton {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    height: 32px !important;
    padding: 6px 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 150ms ease;
    text-decoration: none;
    vertical-align: middle;
}

body.sidebar-nav .q88-blank-questionnaire input[type="submit"].LinkButton:hover,
body.sidebar-nav .q88-blank-questionnaire .LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
}

/* Error label — sits inline with the Download button inside the
   .q88-blank-questionnaire-actions flex container defined below. Flexbox
   with align-items:center handles the center alignment between the 32px
   button and the 16px label, independent of font-baseline heuristics.
   vertical-align:middle is retained as a defensive fallback for any
   environment where the .q88-blank-questionnaire-actions class selector
   fails to apply (e.g., cached old markup). */
body.sidebar-nav .q88-blank-questionnaire span[id$="_lblDownloadError"] {
    display: inline-block;
    margin-left: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #dc2626 !important;
    vertical-align: middle;
}

/* Action row — vertical stack: error label (if visible) on top, Download
   button below, both horizontally centered. Replaces the legacy inline
   style="margin-top:12px".

   flex-direction:column-reverse paints DOM order bottom-up, so the button
   (first child) renders below the error label (second child) without
   reordering the markup. align-items:center (on a column axis) centers
   both children horizontally inside the card, matching the centered h2
   and the label + combobox row above. When the error label is hidden
   (Visible=false → no rendered span), only the button remains and stays
   centered on its own row. */
body.sidebar-nav .q88-blank-questionnaire .q88-blank-questionnaire-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Cancel the inline-block margin-left:12px on the error label when it
   sits inside the flex container — flex gap already provides spacing,
   and the double-margin would push the label 24px off the button. */
body.sidebar-nav .q88-blank-questionnaire .q88-blank-questionnaire-actions span[id$="_lblDownloadError"] {
    margin-left: 0;
}

/* Autocomplete completion list — match the refreshed input width + styling */
.bqACList,
.bqACListWidth {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    padding: 4px;
}

.bqACList .AutoCompleteExtender_CompletionListItem,
.bqACListWidth {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.bqACList .AutoCompleteExtender_CompletionListItem:hover,
.AutoCompleteExtender_Highlighted {
    background-color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   Dropdown positioning + highlight-state fixes (QEN-8290)

   Symptoms on BlankQuestionnaire.aspx before these rules:
     1. Opening the dropdown pushed the Download button and page content
        downward (the inline <div id="AutoComplete"> that ComboBox.ascx uses
        as CompletionListElementID inherits position:relative from
        MainWhiteout.css:3951, so it takes space in flow).
     2. The first item showed as a near-blank grey box because
        .AutoCompleteExtender_HighlightedItem (MainWhiteout.css:3971) paints
        highlighted rows with color:var(--text-on-brand) — near-white — on
        a light grey background. The extender pre-highlights the first row
        and follows the mouse, so every "first hover" looked ghosted.

   Both rules are scoped to body.sidebar-nav .q88-blank-questionnaire so
   they cannot leak to the 40+ legacy ModuleTemplate pages that still use
   the same autocomplete classes.
   -------------------------------------------------------------------------- */

body.sidebar-nav .q88-blank-questionnaire .AutoCompleteExtender_CompletionList {
    position: absolute !important;
    z-index: 100002;
    /* Reset the '-webkit-center' text-align that leaks in from a legacy
       parent; with it, block-level completion items get visually centered
       inside the list because of the Webkit quirk where text-align affects
       block children. */
    text-align: left;
    /* Lock the list to the same width as the <uc:ComboBox Width="350px" />
       textbox so the dropdown stays visually anchored to the field. The base
       MainWhiteout.css rule sets width:auto !important, which lets the
       extender pick whatever width it wants (~585px show-all, ~278px typed);
       that inconsistency drove the "dropdown wider than the field" feedback. */
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    box-sizing: border-box;
}

/* Force non-highlighted items to full width (auto) so they don't fall back
   to MainWhiteout.css's base 175px rule, which combined with the inherited
   -webkit-center made them appear centered (the whole list looked like the
   first row "pushed everything else right"). */
body.sidebar-nav .q88-blank-questionnaire .AutoCompleteExtender_CompletionList .AutoCompleteExtender_CompletionListItem {
    width: auto;
}

/* AutoCompleteExtender *swaps* .AutoCompleteExtender_CompletionListItem for
   .AutoCompleteExtender_HighlightedItem on hover — they're mutually exclusive,
   not stacked. If we don't mirror every size-affecting property from the
   non-highlighted rule (padding, border, width), the hovered row shrinks to
   the legacy base rule (padding:2px; width:175px) and gets re-centered, which
   appears as a ~19px right-shift on alternating items. Keep these properties
   in sync with body.sidebar-nav .AutoCompleteExtender_CompletionListItem in
   createQuestionnaire.css lines 640-647. */
body.sidebar-nav .q88-blank-questionnaire .AutoCompleteExtender_HighlightedItem,
body.sidebar-nav .q88-blank-questionnaire .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_HighlightedItem {
    background-color: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    padding: 6px 32px 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    width: auto;
    line-height: 20px;
}