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