/* Radzen wizard dialog: fixed step strip at top, scrollable content, fixed footer at bottom. */

/* 80% viewport wizard dialog (when opened with CssClass = "rz-wizard-dialog-80") */
.rz-dialog.rz-wizard-dialog-80 {
    width: 80vw !important;
    max-width: 80vw !important;
    height: 80vh !important;
    max-height: 80vh !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.rz-dialog.rz-wizard-dialog-80 .rz-dialog-content {
    flex: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Dialog content container - fills dialog, flex column, full width */
.rz-wizard-dialog {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Steps: takes space between top and footer; overflow hidden so content area gets a height and can show vertical scrollbar */
.rz-wizard-dialog .rz-steps {
    flex: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Content wrapper(s): any div after the step strip must shrink so .rz-widget-content can scroll */
.rz-wizard-dialog .rz-steps > div:not(:first-of-type) {
    flex: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Step list (strip): full width; clip so inner list can show horizontal scrollbar when many/long steps */
.rz-wizard-dialog .rz-steps > div:first-of-type {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 13px 1rem 0.5rem 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    background: var(--rz-base-background-color, #fff) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.rz-wizard-dialog .rz-steps > div:first-of-type > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Step list: horizontal scrollbar when steps (or long titles) exceed available width */
.rz-wizard-dialog .rz-steps ul,
.rz-wizard-dialog .rz-steps [role="tablist"] {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 13px 1rem 0.5rem 1rem !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Step items: natural width so strip scrolls when they don't fit */
.rz-wizard-dialog .rz-steps .rz-steps-item {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 5rem !important;
}
.rz-wizard-dialog .rz-steps .rz-steps-item .rz-menuitem-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Connector line between steps: fixed small gap so step labels get most of the space */
.rz-wizard-dialog .rz-steps .rz-steps-item:not(:last-child)::after {
    display: block !important;
    content: "" !important;
    flex: 0 0 0.5rem !important;
    width: 0.5rem !important;
    height: 1px !important;
    margin: 0 0.25rem !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
}
.rz-wizard-dialog .rz-steps .rz-steps-buttons,
.rz-wizard-dialog .rz-steps .rz-steps-next,
.rz-wizard-dialog .rz-steps .rz-steps-prev {
    display: none !important;
}

/* Step number circle + title (match Radzen demo) */
.rz-wizard-dialog .rz-steps .rz-steps-number {
    min-width: 2rem !important;
    width: 2rem !important;
    min-height: 2rem !important;
    height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.rz-wizard-dialog .rz-steps .rz-steps-title {
    white-space: nowrap !important;
}

/* Steps content area (selected step body): full width, scrollable. Use max-height so scrollbar appears
   regardless of Radzen's internal DOM (flex chain alone was not enough in practice). */
.rz-dialog.rz-wizard-dialog-80 .rz-wizard-dialog .rz-steps .rz-widget-content {
    flex: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-height: calc(80vh - 220px) !important; /* 80vh dialog minus title bar, step strip, footer */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 1rem 0.75rem !important;
    box-sizing: border-box !important;
}
/* Fallback when wizard dialog is used without rz-wizard-dialog-80 (e.g. other dialog sizes) */
.rz-wizard-dialog .rz-steps .rz-widget-content {
    flex: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 1rem 0.75rem !important;
    box-sizing: border-box !important;
}
/* Step content wrappers: use full width so form aligns with wizard frame */
.rz-wizard-dialog .rz-steps .rz-widget-content .dynamic-step-content-with-groups,
.rz-wizard-dialog .rz-steps .rz-widget-content .dynamic-step-content,
.rz-wizard-dialog .rz-steps .rz-widget-content .dynamic-wizard-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Radzen DatePicker inside wizard: full width, in flow, no overlap. Material .rz-form-field can break layout. */
.rz-wizard-dialog .rz-steps .rz-widget-content .form-group .rz-form-field,
.rz-wizard-dialog .rz-steps .rz-widget-content .rz-form-field:has(.rz-calendar),
.rz-wizard-dialog .rz-steps .rz-widget-content .rz-calendar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}
.rz-wizard-dialog .rz-steps .rz-widget-content .form-group .rz-form-field .rz-form-field-content,
.rz-wizard-dialog .rz-steps .rz-widget-content .rz-form-field:has(.rz-calendar) .rz-form-field-content {
    width: 100% !important;
    position: relative !important;
}

/* Footer: fixed at bottom of dialog, full width */
.rz-wizard-footer {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding: 1rem 0.75rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    background: var(--rz-base-background-color, #fff) !important;
}

/* Primary button in wizard footer: match workflow action blue (#2185d0) for consistency */
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary {
    background-color: #2185d0 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #2185d0 !important;
}
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary .rzi,
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary .rz-button-text {
    color: #fff !important;
}
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary:not(.rz-state-disabled):hover:not(:active),
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary:not(.rz-state-disabled):focus:not(:active) {
    background-color: #1a6bb5 !important;
    background-image: none !important;
    border-color: #1a6bb5 !important;
}
.rz-wizard-dialog .rz-wizard-footer .rz-button.rz-primary:not(.rz-state-disabled):active {
    background-color: #155a9e !important;
    background-image: none !important;
    border-color: #155a9e !important;
}

/* Close wizard confirm popup: "Yes, close" button same blue as Save (#2185d0) */
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary {
    background-color: #2185d0 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #2185d0 !important;
}
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary .rzi,
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary .rz-button-text {
    color: #fff !important;
}
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary:not(.rz-state-disabled):hover:not(:active),
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary:not(.rz-state-disabled):focus:not(:active) {
    background-color: #1a6bb5 !important;
    background-image: none !important;
    border-color: #1a6bb5 !important;
}
.rz-dialog.rz-confirm-close-wizard .rz-button.rz-primary:not(.rz-state-disabled):active {
    background-color: #155a9e !important;
    background-image: none !important;
    border-color: #155a9e !important;
}

/* Single-field edit popup: keep above page chrome, but below Radzen popup panels. */
.rz-dialog-wrapper.rz-single-field-edit-popup-wrap {
    z-index: 1100 !important;
}
.rz-dialog.rz-open.rz-single-field-edit-popup {
    z-index: 1101 !important;
}

/* Child field dialogs (SimpleEntityFormDialog) above entity wizard shell. */
.rz-dialog-wrapper.rz-child-fields-dialog-wrap {
    z-index: 1105 !important;
}
.rz-dialog.rz-open.rz-child-fields-dialog {
    z-index: 1106 !important;
}

/* Close-wizard confirm must sit above the entity wizard shell (1040/1041) and any
   child field / single-field popups (1100–1106); otherwise it renders behind the wizard. */
.rz-dialog-wrapper.rz-confirm-close-wizard-wrap {
    z-index: 1205 !important;
}
.rz-dialog.rz-confirm-close-wizard,
.rz-dialog.rz-open.rz-confirm-close-wizard {
    z-index: 1206 !important;
}

/* ReflectionListView confirms (row/bulk delete, request-approval). The list can be hosted
   inside the entity wizard (1041) or child/single-field popups (1100–1106), so its confirm
   must sit on top of whatever launched it. */
.rz-dialog-wrapper.rz-reflist-confirm-wrap {
    z-index: 1210 !important;
}
.rz-dialog.rz-reflist-confirm,
.rz-dialog.rz-open.rz-reflist-confirm {
    z-index: 1211 !important;
}

/* Confirm/alert above Licensed Modules JF modals (1040–1050) and similar custom overlays. */
.rz-dialog-wrapper.rz-stacked-confirm-wrap {
    z-index: 1060 !important;
}
.rz-dialog.rz-stacked-confirm-dialog,
.rz-dialog.rz-open.rz-stacked-confirm-dialog {
    z-index: 1061 !important;
}

/* Snappier dismiss for Radzen dialogs site-wide (Cancel / title-bar X). */
.rz-dialog-wrapper,
.rz-dialog {
    animation-duration: 0.12s !important;
}

/* Wizard field guide: stack above the main entity wizard dialog. */
.rz-dialog.rz-wizard-help-overlay-dialog,
.rz-dialog.rz-open.rz-wizard-help-overlay-dialog {
    z-index: 12060 !important;
}

.rz-wizard-help-panel .rz-wizard-help-purpose {
    color: #374151;
    line-height: 1.45;
}

.rz-wizard-help-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rz-wizard-help-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}

.rz-wizard-help-tag--required {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.rz-wizard-help-tag--optional {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

.rz-wizard-help-tag--readonly {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.rz-wizard-help-tag--maxlen,
.rz-wizard-help-tag--minlen,
.rz-wizard-help-tag--range {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.rz-wizard-help-tag--info {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

/* Gym forms (customer / subscription / freeze): above page gym-modal overlays (99999) and list chrome. */
.rz-dialog-wrapper.rz-gym-form-dialog-wrap {
    z-index: 100200 !important;
}
.rz-dialog.rz-gym-form-dialog,
.rz-dialog.rz-open.rz-gym-form-dialog {
    z-index: 100201 !important;
}

/* Entity wizard shell (RadzenComponents root host only — see App.razor). */
.rz-dialog-wrapper.rz-wizard-dialog-80-wrap {
    z-index: 1040 !important;
}
.rz-dialog.rz-wizard-dialog-80 {
    z-index: 1041 !important;
}

/* Job function per-user customize: above Licensed Modules modals (1040–1050). */
.rz-dialog-wrapper.rz-jf-customize-dialog-wrap {
    z-index: 10200 !important;
}
.rz-dialog.rz-jf-customize-dialog,
.rz-dialog.rz-open.rz-jf-customize-dialog {
    z-index: 10201 !important;
}

/* Criteria builder + entity-type picker stacked above wizard / RFQ / child field dialogs. */
.rz-dialog-wrapper.rz-criteria-builder-overlay-wrap {
    z-index: 100510 !important;
}
.rz-dialog.rz-criteria-builder-overlay-dialog,
.rz-dialog.rz-open.rz-criteria-builder-overlay-dialog {
    z-index: 100511 !important;
}
.rz-dialog-wrapper.rz-criteria-builder-overlay-wrap .rz-dialog-content {
    overflow: visible !important;
}

/* Stock bulk inventory transfer (StockInventoryTransferDialog): capped height, scroll body, fixed footer. */
.rz-dialog.sit-dialog-host {
    height: min(82vh, 720px) !important;
    max-height: min(82vh, calc(100vh - 80px)) !important;
    display: flex !important;
    flex-direction: column !important;
}
.rz-dialog.sit-dialog-host .rz-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Approval variant editor (ApprovalSettingEditorDialog, opened with CssClass "ase-dialog").
   Its internal .ase-root is a flex column whose .ase-body scrolls and footer stays pinned.
   Make the dialog + content a bounded flex column so the approvers list scrolls instead of
   overflowing the dialog (e.g. when more than two approvers are added). */
.rz-dialog.ase-dialog {
    height: min(88vh, calc(100vh - 40px)) !important;
    max-height: min(88vh, calc(100vh - 40px)) !important;
    display: flex !important;
    flex-direction: column !important;
}
.rz-dialog.ase-dialog .rz-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Descendant (not direct child) in case Radzen wraps the component in an extra div. */
.rz-dialog.ase-dialog .rz-dialog-content .ase-root {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}