#form-splitter {
    height: 100%;
    min-height: 620px;
    background: #f4f6fb;
}

/* =========================
   PAGE LAYOUT
========================= */

.nfm-page {
    height: 100%;
    padding: 20px 22px;
    overflow: hidden;
    background: #f4f6fb;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =========================
   HEADER
========================= */

.nfm-header-card {
    background: #ffffff;
    border: 1px solid #e9edf5;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.nfm-title-block {
    min-width: 0;
}

.nfm-page-kicker {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3157ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

.nfm-title-block h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.nfm-title-block p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
    max-width: 720px;
}

.nfm-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* =========================
   HEADER POLISH — Red / Black editorial theme
   Mirrors the Form Render header treatment (see form-render.css) so the
   Forms list, Sections list, and Question Workspace read as part of the
   same brand family: red → ink left stripe, deep-ink chip with a red dot,
   and a red-tinted hover lift on the action buttons.
========================= */

.nfm-header-card,
.nfm-qw-topbar {
    position: relative;
    overflow: hidden;

    /* Room on the left so the 6px brand stripe doesn't pinch the title. */
    padding-left: 32px;

    /* Softer shadow with a barely-there red tint — ties to the stripe color
       without recoloring the card itself. */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 8px 20px rgba(220, 38, 38, 0.04);
}

    /* Editorial left stripe: red fading to deep ink (matches .nfm-fr-header). */
    .nfm-header-card::before,
    .nfm-qw-topbar::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: linear-gradient(180deg, #dc2626 0%, #111827 100%);
        pointer-events: none;
    }

/* Restyle the page kicker / workspace chip to match the Form Render chip:
   deep-ink pill with a red status dot and an uppercase editorial label. */
.nfm-page-kicker,
.nfm-qw-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 6px 14px 6px 12px;
    background: #111827;
    color: #f9fafb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .nfm-page-kicker::before,
    .nfm-qw-chip::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    }

/* Hover micro-interaction on header action buttons — red-tinted lift that
   echoes the stripe / chip dot. No color change on the button itself. */
.nfm-header-actions .btn {
    transition: transform .12s ease, box-shadow .12s ease;
}

    .nfm-header-actions .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(220, 38, 38, 0.15);
    }

/* =========================
   SHARED PAGE NAVIGATION
   Used by Section List and Question Workspace
========================= */

.nfm-back-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    border: 1px solid #e4e7ec;
    background: #ffffff;
    color: #475467;
    border-radius: 9px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: all .18s ease;
}

    .nfm-back-action:hover {
        background: #f8fafc;
        color: #3157ff;
        border-color: #cdd8ff;
    }

    .nfm-back-action i {
        font-size: 11px;
    }

/* =========================
   GRID CARD
========================= */

.nfm-grid-card {
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e9edf5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: flex;
    flex-direction: column;
}

/* =========================
   GRID TOOLBAR
========================= */

.nfm-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f7;
    background: #ffffff;
}

.nfm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   SEARCH
========================= */

.nfm-search-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
}

    .nfm-search-wrap i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #98a2b3;
        font-size: 13px;
        z-index: 1;
    }

    .nfm-search-wrap input {
        height: 36px;
        padding-left: 38px;
        border-radius: 10px;
        border: 1px solid #dbe2ea;
        background: #f8fafc;
        transition: all .18s ease;
        font-size: 13px;
    }

        .nfm-search-wrap input:focus {
            background: #fff;
            border-color: #3157ff;
            box-shadow: 0 0 0 3px rgba(49, 87, 255, 0.08);
        }

/* =========================
   GRID
========================= */

.nfm-grid-wrap {
    flex: 1;
    min-height: 0;
}

#formManagementGrid {
    height: 100%;
}

    #formManagementGrid .e-grid {
        border: none;
    }

    #formManagementGrid .e-gridheader {
        border-top: none;
    }

    #formManagementGrid .e-gridheader,
    #formManagementGrid .e-headercontent {
        background: #f8fafc;
    }

    #formManagementGrid .e-headercell {
        color: #344054;
        font-size: 12px;
        font-weight: 700;
    }

    #formManagementGrid .e-rowcell {
        font-size: 13px;
        color: #1f2937;
    }

    #formManagementGrid .e-row:hover {
        background: #f8fbff;
    }

    #formManagementGrid .e-selectionbackground {
        background: #eef4ff !important;
    }

    #formManagementGrid .e-gridpager {
        border-top: 1px solid #edf1f7;
    }

/* =========================
   FORM NAME COLUMN
========================= */

.nfm-form-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .nfm-form-name strong {
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
    }

.nfm-muted {
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-word;
}

/* =========================
   STATUS BADGES
========================= */

.nfm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 74px;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
}

    .nfm-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .nfm-status.active {
        background: #eafaf1;
        color: #087443;
    }

        .nfm-status.active::before {
            background: #12b76a;
        }

    .nfm-status.inactive {
        background: #fff4e5;
        color: #b54708;
    }

        .nfm-status.inactive::before {
            background: #f79009;
        }

/* =========================
   ACTION BUTTONS
========================= */

.nfm-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nfm-action-btn {
    border: 1px solid #e4e7ec;
    background: #ffffff;
    color: #475467;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .nfm-action-btn:hover {
        background: #f8fbff;
        color: #3157ff;
        border-color: #cdd8ff;
    }

    .nfm-action-btn.icon-only {
        width: 36px;
        height: 34px;
        padding: 0;
        justify-content: center;
    }

/* Header + grid-toolbar buttons (Refresh, Export, Clear, Columns, …) come from
   Bootstrap's .btn .btn-sm .btn-light. The default btn-sm sizing is too cramped for
   our header cards — bump font + padding to keep labels readable at the standard
   page scale. Scoped to .nfm-page so we don't change Bootstrap defaults elsewhere. */
.nfm-page .nfm-header-actions .btn,
.nfm-page .nfm-toolbar-actions .btn {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
}

/* EJ2 column-chooser dialog. EJ2 appends the dialog into the grid's wrapper which,
   when opened, pushes the grid contents to the side. Pinning the dialog with
   absolute positioning + a top-right anchor takes it out of that flow so the grid
   layout stays put. The grid's wrapper has position:relative from EJ2, so the
   absolute positioning resolves against it (i.e., top-right of the grid). */
.nfm-page .e-ccdlg {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 1001;
}

/* =========================
   SIDE PANE
========================= */

.sidepane-container {
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    height: 100%;
}

.sidepane-title {
    min-height: 52px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    background: #ffffff;
    font-weight: 700;
    color: #1f2937;
}

.sidepane-body {
    height: calc(100% - 52px);
    overflow: auto;
    background: #f8fafc;
}

/* =========================
   SIDE FORM
========================= */

.nfm-side-form {
    padding: 16px;
}

.nfm-side-section {
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.nfm-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #667085;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.nfm-side-form label {
    font-weight: 600;
    font-size: 13px;
    color: #344054;
    margin-bottom: 5px;
}

.nfm-switch-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 12px;
}

    .nfm-switch-line small {
        display: block;
        color: #667085;
        font-size: 12px;
        margin-top: 3px;
    }

.nfm-side-actions {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-top: 1px solid #eef0f4;
    padding: 14px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#formManagementGrid .nfm-actions-column,
#formManagementGrid .nfm-actions-column .e-headertext {
    text-align: center;
}

#formManagementGrid .nfm-row-actions {
    justify-content: center;
}

.nfm-action-btn.danger {
    color: #b42318;
}

    .nfm-action-btn.danger:hover {
        background: #fef3f2;
        border-color: #fecdca;
        color: #b42318;
    }

.nfm-action-btn.success {
    color: #027a48;
}

    .nfm-action-btn.success:hover {
        background: #ecfdf3;
        border-color: #abefc6;
        color: #027a48;
    }

.nfm-stat-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.nfm-stat-card {
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.nfm-stat-label {
    display: block;
    font-size: 12px;
    color: #667085;
    margin-bottom: 6px;
}

.nfm-stat-card strong {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.nfm-stat-card.total strong {
    color: #3157ff;
}

.nfm-stat-card.active strong {
    color: #087443;
}

.nfm-stat-card.deleted strong {
    color: #b42318;
}

.nfm-stat-card.total {
    border-left: 4px solid #3157ff;
}

.nfm-stat-card.active {
    border-left: 4px solid #12b76a;
}

.nfm-stat-card.deleted {
    border-left: 4px solid #f04438;
}

.nfm-page .e-ccdlg {
    width: 340px !important;
}

#formManagementGrid .e-rowcell:first-child,
#formManagementGrid .e-headercell:first-child {
    padding-left: 10px;
}

.nfm-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3157ff;
    font-size: 12px;
    font-weight: 700;
}

/* Neutral count pill used by the Form List "Sections" column and the Section
   List "Questions" column. Deliberately slate (not coloured) so it doesn't
   compete with the type badge or the score badge in the same row. */
.nfm-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

/* Form List "Published" badge — derived client-side from SubmissionCount.
   Green Published pill signals "this form is in active use, edit carefully";
   neutral Draft pill is the default. Shape mirrors .nfm-type-badge so the
   two columns line up visually in the grid. */
.nfm-pill {
    display: inline-flex;
    width: 96px;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.nfm-pill-published {
    background: #dcfce7;
    color: #166534;
}

.nfm-pill-draft {
    background: #f1f5f9;
    color: #475569;
}

/* Form-type badge — used by every grid that shows a FormType column (form list,
   section list, submission history). The base style is a neutral indigo pill;
   known FormType.Name values are colour-coded below via data-type selectors so
   they're scannable at a glance without being garish. Unknown types fall back to
   the base indigo. */
.nfm-type-badge {
    display: inline-flex;
    /* Fixed width keeps a column of badges visually aligned regardless of label
       length; longer labels truncate with an ellipsis rather than stretching the
       pill and making the column ragged. */
    width: 130px;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-type palettes. Each pair is a soft tint + a readable accent — picked to be
   distinguishable on a white grid row without screaming for attention.
   Compliance uses amber (not red) so it doesn't read as a destructive/error
   state at a glance — red is reserved for actual destructive UI (delete, etc.). */
.nfm-type-badge[data-type="Compliance"]              { background: #fef3c7; color: #b45309; }
.nfm-type-badge[data-type="Peer Review"]             { background: #dbeafe; color: #1d4ed8; }
.nfm-type-badge[data-type="Customer Survey"]         { background: #ccfbf1; color: #0f766e; }
.nfm-type-badge[data-type="Monthly KPI Framework"]   { background: #f3e8ff; color: #6d28d9; }
.nfm-type-badge[data-type="Quarterly KPI"]           { background: #ffedd5; color: #c2410c; }
.nfm-type-badge[data-type="Business Questions"]      { background: #cffafe; color: #0e7490; }
.nfm-type-badge[data-type="Brand"]                   { background: #fce7f3; color: #be185d; }
.nfm-type-badge[data-type="Catalog"]                 { background: #dcfce7; color: #15803d; }
.nfm-type-badge[data-type="Product"]                 { background: #d1fae5; color: #047857; }
.nfm-type-badge[data-type="Ticketing"]               { background: #e2e8f0; color: #334155; }

/* Person-pill — used by the submission-history grid for both Rated User and
   Submitter columns. The fa icon + soft tint make people visually distinct from
   the entity columns (Related Record, Form Name) so a submitter scanning their
   own history can spot a specific person at a glance. data-role tints the two
   pills apart: rated = teal (the subject), submitter = slate (the author). */
.nfm-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfm-user-badge > i {
    font-size: 11px;
    opacity: 0.85;
}

/* Rated user — the person being evaluated by the form. Teal tint. */
.nfm-user-badge[data-role="rated"]      { background: #ccfbf1; color: #0f766e; }

/* Submitter — the person who filled out the form. Slate tint so it reads as
   secondary information vs. the rated user. */
.nfm-user-badge[data-role="submitter"]  { background: #e2e8f0; color: #334155; }

/* =========================
   MAXIMIZED
========================= */

.nfm-maximized .sidepane-container {
    width: 680px !important;
}

/* =========================
   BUTTON POLISH
========================= */

.btn-primary.btn-sm {
    border-radius: 9px;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
}

.btn-light.btn-sm {
    border-radius: 9px;
    border: 1px solid #e4e7ec;
    background: #ffffff;
    font-weight: 600;
    color: #475467;
}

    .btn-light.btn-sm:hover {
        background: #f8fafc;
    }


/* =========================
   Form Configuration UI 
========================= */
.nfm-config-dialog .e-dlg-header-content {
    padding: 18px 24px;
}

.nfm-config-dialog .e-dialog-content {
    padding: 20px 24px !important;
    background: #f8fafc;
}

.nfm-config-dialog .e-footer-content {
    padding: 16px 24px !important;
    border-top: 1px solid #eaecf0;
}

.nfm-config-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nfm-config-meta-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.nfm-config-meta-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #667085;
}

.nfm-config-section {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 18px;
}

.nfm-config-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #344054;
    margin-bottom: 16px;
}

.nfm-inline-switch {
    border: 1px solid #eaecf0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfcfd;
}

.nfm-inline-switch-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.nfm-inline-switch-description {
    margin-top: 3px;
    font-size: 12px;
    color: #667085;
}


.nfm-config-form {
    padding: 6px 4px;
}

.nfm-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfm-switch-card {
    height: 100%;
    min-height: 76px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
}

.nfm-switch-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.nfm-switch-description {
    font-size: 12px;
    color: #667085;
    line-height: 1.4;
}

#formConfigurationDialog .e-dialog-content {
    padding: 20px 24px !important;
}

#formConfigurationDialog .e-footer-content {
    padding: 14px 24px !important;
}

#formConfigurationDialog textarea {
    resize: vertical;
}

/* =========================
   Form Section Configuration UI 
========================= */
.nfm-action-btn.questions {
    color: #3157ff;
    background: #eef4ff;
    border-color: #cdd8ff;
}

    .nfm-action-btn.questions:hover {
        color: #2347d8;
        background: #e0e9ff;
        border-color: #b7c6ff;
    }

.nfm-readonly-field {
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .nfm-readonly-field span {
        font-size: 11px;
        color: #667085;
        margin-bottom: 2px;
    }

    .nfm-readonly-field strong {
        font-size: 14px;
        color: #111827;
        font-weight: 700;
    }

/* =========================
   Question Workspace Configuration UI 
========================= */

.nfm-qw-page {
    height: 100%;
    min-height: 0;
    padding: 16px 18px;
    background: #f5f7fb;
    color: #111827;
    overflow: hidden;
}

.nfm-qw-topbar {
    min-height: 86px;
    margin-bottom: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}

.nfm-back-btn {
    border: none;
    background: transparent;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 8px;
}

    .nfm-back-btn:hover {
        color: #3157ff;
    }

.nfm-qw-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .nfm-qw-title-row h4 {
        margin: 0;
        font-size: 21px;
        font-weight: 800;
        color: #0f172a;
    }

.nfm-qw-topbar p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 13px;
}

.nfm-qw-chip {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3157ff;
    font-size: 11px;
    font-weight: 800;
}

.nfm-qw-layout {
    height: calc(100% - 104px);
    min-height: 0;
    display: grid;
    /* Side panels trimmed from 330px/360px to 290px/310px so the Section
       Questions list (center pane) gets more breathing room. Adjust the
       matching declaration in the responsive block lower down in this file
       if you change these. */
    grid-template-columns: 290px minmax(420px, 1fr) 310px;
    gap: 14px;
}

.nfm-qw-panel {
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}

.nfm-qw-panel-header {
    min-height: 62px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .nfm-qw-panel-header h5 {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
        color: #111827;
    }

    .nfm-qw-panel-header span {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #667085;
    }

.nfm-count-pill {
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    font-weight: 800;
}

/* Right-aligned action cluster inside each panel header. Groups the action
   buttons and the count pill (or the Auto-Save badge and the count pill on
   the Section Questions panel) so spacing stays tight regardless of how many
   chips/buttons sit there. */
.nfm-qw-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

    /* Reshape the count chip when it sits inside the action cluster so it
       matches the 26x26 rounded-square footprint of the action buttons next
       to it. The standalone .nfm-count-pill rule below is left alone — it
       still renders as a rounded pill anywhere else in the workspace. */
    .nfm-qw-panel-header-actions .nfm-count-pill {
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        border-radius: 7px;
        border: 1px solid #e4e7ec;
        background: #f9fafb;
        font-weight: 700;
    }

/* Icon-only square button used inside panel headers. Compact (26x26) so the
   bank-panel header fits Refresh + Create + count pill without forcing the
   "Question Bank" title to wrap. Tooltips on the button (title attr) keep
   the action discoverable without a visible label. */
.nfm-qw-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #475467;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}

    .nfm-qw-header-btn i {
        font-size: 11px;
        line-height: 1;
    }

    .nfm-qw-header-btn:hover {
        background: #f8fafc;
        border-color: #b6c0cc;
        color: #1f2937;
        transform: translateY(-1px);
    }

    .nfm-qw-header-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(49, 87, 255, .18);
    }

    /* The visible text label is hidden — only the icon shows. The label
       still exists in the DOM as an accessible name for screen readers. */
    .nfm-qw-header-btn .nfm-qw-header-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

/* Brand purple (#623AA2) — matches the app-wide --primary-bg-color used by
   .btn-primary across Nucleus, so this header action reads as "the create
   action" everywhere the user sees it. */
.nfm-qw-header-btn-primary {
    background: #623AA2;
    border-color: #623AA2;
    color: #fff;
}

    .nfm-qw-header-btn-primary:hover {
        background: #4f2e85;
        border-color: #4f2e85;
        color: #fff;
    }

    .nfm-qw-header-btn-primary:focus-visible {
        box-shadow: 0 0 0 3px rgba(98, 58, 162, .25);
    }

/* Always-on indicator that drag-and-drop changes save automatically. Soft
   green pill — paired with the count pill on the Section Questions panel
   header. Override the generic `.nfm-qw-panel-header span` rule so it lays
   out inline, not as the muted subtitle. */
.nfm-qw-autosave-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    /* Same 7px radius as the action buttons and the count chip in this
       cluster so all three elements share one shape language. */
    border-radius: 7px;
    background: #ecfdf3;
    color: #027a48 !important;
    border: 1px solid #abefc6;
    font-size: 11px !important;
    font-weight: 800;
    margin-top: 0 !important;
    white-space: nowrap;
}

    .nfm-qw-autosave-badge i {
        font-size: 10px;
        color: #12b76a;
    }

/* One-line instructional banner above the section questions list. Tells the
   user the list supports drag-to-reorder and that the change auto-saves —
   both behaviors were silent before. */
.nfm-qw-reorder-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px dashed #d0d5dd;
    border-radius: 8px;
    color: #475467;
    font-size: 12px;
    line-height: 1.4;
}

    .nfm-qw-reorder-hint i {
        color: #98a2b3;
        font-size: 12px;
    }

.nfm-qw-search {
    position: relative;
    padding: 12px 14px 8px;
}

    .nfm-qw-search i {
        position: absolute;
        left: 27px;
        top: 23px;
        font-size: 12px;
        color: #98a2b3;
    }

    .nfm-qw-search input {
        width: 100%;
        height: 36px;
        border: 1px solid #d0d5dd;
        border-radius: 9px;
        padding: 0 12px 0 34px;
        color: #344054;
        font-size: 13px;
        outline: none;
    }

        .nfm-qw-search input:focus {
            border-color: #3157ff;
            box-shadow: 0 0 0 3px rgba(49, 87, 255, .10);
        }

.nfm-qw-filter-row {
    padding: 0 14px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nfm-qw-filter {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #475467;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
}

    .nfm-qw-filter.active,
    .nfm-qw-filter:hover {
        background: #eef4ff;
        color: #3157ff;
        border-color: #cdd8ff;
    }

.nfm-qw-scroll-list,
.nfm-qw-section-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 16px;
}

.nfm-qw-bank-card {
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .nfm-qw-bank-card:hover {
        border-color: #cdd8ff;
        box-shadow: 0 8px 20px rgba(49, 87, 255, .08);
        transform: translateY(-1px);
    }

.nfm-qw-card-main {
    min-width: 0;
    flex: 1;
}

.nfm-qw-card-title {
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.nfm-qw-card-desc {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nfm-qw-card-meta {
    margin-top: 9px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nfm-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
}

.nfm-soft-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 11px;
    font-weight: 800;
}

.nfm-qw-add-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #cdd8ff;
    border-radius: 9px;
    background: #eef4ff;
    color: #3157ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .nfm-qw-add-btn:hover {
        background: #3157ff;
        color: #fff;
    }

    .nfm-qw-add-btn.added {
        background: #eafaf1;
        border-color: #b7ebcd;
        color: #087443;
        cursor: default;
    }

.nfm-qw-section-card {
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    padding: 13px;
    display: grid;
    /* handle | order | content | score | remove — five tracks for the card's five
       children. (Was four, so the score editor overflowed into an implicit cell
       and shoved the layout.) The two trailing controls size to content. */
    grid-template-columns: 22px 32px 1fr auto auto;
    align-items: start;
    gap: 10px;
    background: #fff;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .nfm-qw-section-card:hover {
        border-color: #cdd8ff;
        background: #fcfdff;
    }

    .nfm-qw-section-card.selected {
        border-color: #3157ff;
        box-shadow: 0 0 0 3px rgba(49, 87, 255, .10);
    }

.nfm-qw-drag-handle {
    color: #98a2b3;
    padding-top: 3px;
    cursor: grab;
}

/* Card currently being dragged for reorder — dim it and lift it slightly so
   the live insertion point is easy to read. */
.nfm-qw-section-card.nfm-qw-dragging {
    opacity: .55;
    cursor: grabbing;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
}

.nfm-qw-order {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef4ff;
    color: #3157ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
}

.nfm-qw-section-card-content {
    min-width: 0;
}

.nfm-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
}

    .nfm-status-dot:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .nfm-status-dot.active {
        color: #087443;
    }

        .nfm-status-dot.active:before {
            background: #12b76a;
        }

    .nfm-status-dot.inactive {
        color: #b54708;
    }

        .nfm-status-dot.inactive:before {
            background: #f79009;
        }

.nfm-qw-icon-btn {
    width: 30px;
    height: 30px;
    margin-right:2px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .nfm-qw-icon-btn:hover {
        background: #f8fafc;
    }

    .nfm-qw-icon-btn.danger {
        color: #dc2626;
    }

        .nfm-qw-icon-btn.danger:hover {
            background: #fff1f2;
            border-color: #fecdd3;
        }

/* Per-item score editor on each section question card. Sits between the card
   content and the remove button; stays compact so it does not crowd the row.
   align-self:center keeps it vertically centred against the multi-line card body
   (the card grid is align-items:start for the handle/order/text). */
.nfm-qw-item-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 3px;
    margin-right: 4px;
    min-width: 110px;
}

/* Centre the trailing remove button against the card body too. */
.nfm-qw-section-card > .nfm-qw-icon-btn {
    align-self: center;
}

    .nfm-qw-item-score-label {
        font-size: 11px;
        color: #667085;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        font-weight: 600;
    }

    /* The actual input is a Syncfusion NumericTextBox mounted by JS — tune the
       wrapper so it fits the compact card slot without dragging in EJ2 defaults. */
    .nfm-qw-item-score .e-control-wrapper.nfm-qw-item-score-numeric {
        height: 30px;
        margin: 0;
    }

        .nfm-qw-item-score .e-control-wrapper.nfm-qw-item-score-numeric input.e-numerictextbox {
            text-align: center;
            font-size: 13px;
            padding: 2px 8px;
            color: #1f2937;
            /* Reserve room for the digits so the spin-button strip can't squeeze
               the value out of view in this narrow card slot. */
            min-width: 52px;
        }

.nfm-qw-empty-state,
.nfm-qw-config-empty {
    height: 100%;
    min-height: 220px;
    border: 1px dashed #d0d5dd;
    border-radius: 13px;
    color: #667085;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
}

    .nfm-qw-empty-state.compact {
        min-height: 180px;
    }

    .nfm-qw-empty-state i,
    .nfm-qw-config-empty i {
        font-size: 24px;
        color: #98a2b3;
    }

    .nfm-qw-empty-state strong,
    .nfm-qw-config-empty strong {
        color: #344054;
        font-size: 14px;
    }

    .nfm-qw-empty-state span,
    .nfm-qw-config-empty span {
        font-size: 12px;
    }

.nfm-qw-config-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.nfm-qw-config-question {
    border: 1px solid #eef0f4;
    border-radius: 12px;
    background: #fff;
    padding: 13px;
    margin-bottom: 12px;
}

    .nfm-qw-config-question label,
    .nfm-qw-config-section-title {
        display: block;
        margin-bottom: 7px;
        color: #667085;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .nfm-qw-config-question div {
        color: #111827;
        font-size: 13px;
        line-height: 1.45;
    }

.nfm-qw-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.nfm-qw-readonly-field {
    border: 1px solid #eef0f4;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
}

    .nfm-qw-readonly-field.full {
        margin-bottom: 12px;
    }

    .nfm-qw-readonly-field span {
        display: block;
        color: #667085;
        font-size: 11px;
        margin-bottom: 4px;
    }

    .nfm-qw-readonly-field strong {
        color: #111827;
        font-size: 13px;
    }

.nfm-qw-info-box {
    border: 1px solid #cdd8ff;
    background: #eef4ff;
    color: #3157ff;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.nfm-qw-option-config {
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 13px;
    background: #fff;
}

.nfm-qw-dialog-body {
    padding: 6px 2px;
}

@media (max-width: 1400px) {
    /* Match the 5-column variable-driven template defined further down so the
       resize handles still fall in the right slots on mid-width screens. */
    .nfm-qw-layout {
        grid-template-columns:
            var(--nfm-qw-bank-width, 300px)
            14px
            minmax(0, 1fr)
            14px
            var(--nfm-qw-config-width, 330px);
    }
}

@media (max-width: 1100px) {
    .nfm-qw-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .nfm-qw-panel {
        min-height: 420px;
    }

    .nfm-qw-page {
        overflow-y: auto;
    }
}

/* =========================
   QUESTION WORKSPACE FIXES
   Match Form Sections typography and full-height layout
========================= */

.nfm-qw-page {
    height: 100%;
    min-height: 0;
    padding: 20px 22px;
    background: #f4f6fb;
    color: #1f2937;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nfm-qw-topbar {
    min-height: unset;
    margin-bottom: 0;
    padding: 18px 20px;
    border: 1px solid #e9edf5;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.nfm-qw-title-row h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.nfm-qw-topbar p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
    max-width: 720px;
}

.nfm-qw-layout {
    flex: 1;
    min-height: 0;
    height: auto;
    display: grid;
    /* Narrower side panes — see the matching note above. */
    grid-template-columns: 290px minmax(420px, 1fr) 310px;
    gap: 14px;
}

.nfm-qw-panel {
    min-height: 0;
    height: 100%;
}

.nfm-qw-scroll-list,
.nfm-qw-section-list,
.nfm-qw-config-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.nfm-qw-panel-header h5 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.nfm-qw-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.nfm-qw-card-desc {
    font-size: 12px;
    color: #667085;
}

.nfm-qw-config-empty {
    height: 100%;
    min-height: 0;
}

.nfm-qw-field-block {
    margin-bottom: 14px;
}

.nfm-qw-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* Form List description — full-width line under the title + actions row,
   sitting just above the picker. */
.nfm-qw-list-subtitle {
    margin: -4px 0 10px;
}

.nfm-qw-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfm-qw-list-item-row {
    border: 1px solid #eef0f4;
    background: #fff;
    border-radius: 10px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .nfm-qw-list-item-row strong {
        display: block;
        font-size: 13px;
        color: #111827;
    }

    .nfm-qw-list-item-row span {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        color: #667085;
    }

.nfm-qw-empty-inline {
    border: 1px dashed #d0d5dd;
    border-radius: 10px;
    padding: 12px;
    color: #667085;
    font-size: 12px;
    text-align: center;
}

.nfm-qw-config-content {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nfm-qw-config-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.nfm-qw-config-footer {
    flex-shrink: 0;
    border-top: 1px solid #eef0f4;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
}

.nfm-qw-bank-card {
    cursor: grab;
}

    .nfm-qw-bank-card:active {
        cursor: grabbing;
    }

    .nfm-qw-bank-card.dragging {
        opacity: .35;
        transform: scale(.98);
    }

.nfm-qw-drag-preview {
    background: #ffffff;
    border: 1px solid #cdd8ff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.22);
    opacity: .96;
    transform: rotate(-1deg);
}

.nfm-qw-is-dragging #sectionQuestionsList {
    border-color: #cdd8ff;
}

#sectionQuestionsList.drag-over {
    outline: 2px dashed #3157ff;
    outline-offset: -6px;
    background: #f5f8ff;
}

    #sectionQuestionsList.drag-over::before {
        content: "Drop question here";
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 8px;
        border: 1px dashed #3157ff;
        border-radius: 10px;
        color: #3157ff;
        font-size: 12px;
        font-weight: 700;
        background: #eef4ff;
    }

/* =========================
   QUESTION WORKSPACE — Resizable side panes
   We keep the existing CSS grid layout but swap the static column widths for
   CSS variables, and slot two narrow "handle" columns between the panes.
   The JS in question-workspace.js injects matching .nfm-qw-resize-handle divs
   into those columns and updates the variables as the user drags.
========================= */

.nfm-qw-layout {
    gap: 0;
    grid-template-columns:
        var(--nfm-qw-bank-width, 330px)
        14px
        minmax(0, 1fr)
        14px
        var(--nfm-qw-config-width, 360px);
}

/* The handles themselves are mostly invisible — the visible line only appears
   on hover or while actively dragging. Keeps the UI quiet at rest. */
.nfm-qw-resize-handle {
    position: relative;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}

    .nfm-qw-resize-handle::before {
        content: '';
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        border-radius: 1px;
        background: transparent;
        transition: background .15s ease;
    }

    .nfm-qw-resize-handle:hover::before,
    body.nfm-qw-resizing .nfm-qw-resize-handle::before {
        /* Brand gradient (red → ink) — matches the header stripe accent. */
        background: linear-gradient(180deg, #dc2626 0%, #111827 100%);
    }

/* While a drag is in progress, force col-resize globally so the cursor
   doesn't flicker when it leaves the 14px handle slot. */
body.nfm-qw-resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* On narrow screens the layout collapses to a single column — handles are
   meaningless there, hide them. */
@media (max-width: 1100px) {
    .nfm-qw-resize-handle {
        display: none;
    }
}

/* =========================
   QUESTION WORKSPACE — Title block polish
   Move the workspace chip above the section name (kicker / eyebrow pattern
   used by .nfm-page-kicker on the Forms and Sections list pages and by
   .nfm-fr-title-block in Form Render). Also lift the section title to the
   editorial scale used in .nfm-fr-title-block h4 so the section name reads
   as the primary surface on the page.
========================= */

.nfm-qw-title-row {
    /* Stack instead of side-by-side so the chip can sit above the title. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

    /* Chip sits below the title (natural source order in the markup) so it
       reads as a label for the section name rather than crowding the back
       link. Margin-top gives it a clear gap from the h4 above. */
    .nfm-qw-title-row .nfm-qw-chip {
        margin-top: 10px;
    }

    /* Editorial section title — same recipe as .nfm-fr-title-block h4
       (28px / 700 / deep ink / negative tracking). The section name is the
       reason the user is on this page; let it carry weight. */
    .nfm-qw-title-row h4 {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        color: #0f172a;
        letter-spacing: -0.015em;
        margin: 0;
    }

/* Description text under the title — slightly more comfortable line-height
   and the warmer grey already used in form-render so the supporting copy
   reads quickly. Existing 13px font size is kept. */
.nfm-qw-topbar p {
    color: #6b7280;
    line-height: 1.55;
    max-width: 760px;
}

/* =========================
   QUESTION WORKSPACE — Bank card polish
   Typography refinements + a proper gap between the edit/add action buttons,
   plus a red-tinted hover that ties the card back to the brand theme.
========================= */

/* Card body — slightly more padding so the title and meta pills don't crowd
   the edges, and a deeper rest-state border for clearer card boundaries. */
.nfm-qw-bank-card {
    padding: 14px;
    border-color: #e9edf5;
    gap: 12px;
}

    /* Hover: neutral ink-tinted lift — same recipe as .nfm-fr-section:hover.
       Red is reserved for brand accents (header stripe, chip dot, sub-header
       gradient); card hovers stay quiet so they don't shout for attention. */
    .nfm-qw-bank-card:hover {
        border-color: #d1d5db;
        box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    }

/* Title — drop the heavy 800 weight, lift to 14px with deep-ink color and
   tight tracking (same recipe used in .nfm-fr-title-block h4). */
.nfm-qw-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.35;
}

/* Description — 13px to align with the rest of the module's body text, with
   warmer grey for readability over white. */
.nfm-qw-card-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
    margin-top: 5px;
}

/* Meta row — slightly more breathing room above and between pills. */
.nfm-qw-card-meta {
    margin-top: 11px;
    gap: 7px;
}

/* Pills — drop weight from 800 to 700 so they read as labels, not shouts. */
.nfm-type-pill,
.nfm-soft-pill {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Action buttons cluster — give the edit and add buttons a proper gap so
   they don't read as a single shape. .nfm-qw-card-actions is the parent in
   the rendered markup (see question-workspace.js renderQuestionBank). */
.nfm-qw-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Drop the awkward 2px right-margin that used to provide spacing — the
   parent gap now owns that responsibility. */
.nfm-qw-card-actions .nfm-qw-icon-btn {
    margin-right: 0;
}

/* =========================
   QUESTION WORKSPACE — Sub-pane header polish
   Brings the Question Bank, Section Questions, and Question Configuration
   panel headers in line with the red/ink editorial treatment used on the
   page header and Form Render section headers (see .nfm-fr-section-header).
   Same device: tighter deep-ink title, warmer/more readable subtitle, and a
   short gradient accent anchored to the bottom divider.
========================= */

.nfm-qw-panel-header {
    position: relative;
}

    /* 36px red → ink accent stripe sitting on the bottom border. Anchors the
       title visually and matches .nfm-fr-section-header::after so the workspace
       feels like part of the same brand family as the renderer. */
    .nfm-qw-panel-header::after {
        content: '';
        position: absolute;
        left: 16px;
        bottom: -1px;
        width: 36px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #dc2626 0%, #111827 100%);
    }

    /* Title: bumped to 16px (was 15px) to sit between the page-header h4 (24px)
       and the body text. Deep-ink color + negative tracking match the title
       treatment in .nfm-fr-title-block h4. */
    .nfm-qw-panel-header h5 {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.005em;
        line-height: 1.25;
    }

    /* Subtitle: 13px to match the main header description (.nfm-title-block p)
       and the rest of the module — the previous 12px was too small to read
       quickly. Warmer grey + more line-height for scanability. Scoped to the
       inner title block so the count pill (sibling span) keeps its styling. */
    .nfm-qw-panel-header > div > span {
        color: #6b7280;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0.005em;
        margin-top: 4px;
    }

/* =========================
   QUESTION WORKSPACE — Modern Drag Ghost + Add Item button
========================= */

/* Floating drag ghost produced by Syncfusion Draggable's helper().
   - Preserves the original card styling.
   - Adds elevation and a slight scale so it visibly "lifts" off the page.
   - pointer-events:none keeps it from interfering with drop detection. */
.nfm-qw-drag-clone {
    position: absolute;
    z-index: 9999;
    pointer-events: none;

    background: #ffffff;
    border: 1px solid #cdd8ff;
    border-radius: 12px;
    padding: 12px;

    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.24);
    opacity: 0.96;
    transform: scale(1.03);
    transition: box-shadow .12s ease;
}

/* Match the existing .nfm-header-actions / .nfm-toolbar-actions button polish
   (see ~line 336): font 13/600, padding 7x14, radius 8. Adding white-space:nowrap
   here is the actual fix — without it, "Add Item" / "Create List" wrap or clip
   inside narrow side panes. No bespoke sizes or font-weight bumps. */
#refreshQuestionWorkspaceBtn,
#createQuestionBtn,
#saveQuestionConfigBtn,
#createFormListBtn,
#addFormListItemBtn {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

/* In the List Items header the label column should shrink first so the
   action button keeps its natural width and never gets squished. */
.nfm-qw-list-header > div:first-child {
    min-width: 0;
    flex: 1;
}

.nfm-qw-list-header > button {
    flex-shrink: 0;
}

/* Edit List + Create List sit together on the right of the Form List header.
   Keep them on one line at their natural width and aligned to the top of the
   header block (matches the label baseline). */
.nfm-qw-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

    /* Force both buttons to identical box metrics so Edit List (outline) and
       Create List (filled) read as one matched pair regardless of Bootstrap's
       per-variant padding. */
    .nfm-qw-list-actions > button {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        padding: 0 14px;
        font-size: 13px;
        line-height: 1;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* Edit List is the secondary action — outline it so Create List (filled
       btn-light) reads as the primary, and the pair blends as a set. */
    .nfm-qw-list-actions > #editFormListBtn {
        background: transparent;
        border: 1px solid #d0d5dd;
        color: #475467;
    }

        .nfm-qw-list-actions > #editFormListBtn:hover:not(:disabled) {
            background: #f8fafc;
            border-color: #98a2b3;
        }

        .nfm-qw-list-actions > #editFormListBtn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }