.wizard-step-wrapper {
	height: 580px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	/* Default step-content width cap. Two-column and nested-grid steps override this one
	   variable below instead of every width-capped piece (form, title, alert, action row, tip)
	   needing its own copy of the condition + value edited separately. */
	--wizard-step-max-width: 480px;
}
/* A step whose layout has a two-column row (DevExpress renders those items/groups with a
   dxbl-col-md-6 grid class instead of the full-width dxbl-col-md-12), or a tab containing a
   nested grid (e.g. the New Order wizard's Schedules picker), needs more room than the
   default single-column cap. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6),
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) {
	--wizard-step-max-width: 750px;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header {
	border-bottom: 0px solid rgba(var(--midgrey), 0.25) !important;
	height: 0px !important;
	min-height: 0px !important;
	padding: 0px !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button {
	position: absolute !important;
	right: 20px;
	top: 20px;
	z-index: 5;
	border: 1px solid rgba(var(--midgrey), 0.35);
	border-radius: 50%;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button:hover {
	background: var(--site-primary) !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button:hover .dxbl-image {
	filter: var(--icon-filter-white) !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .view-caption-root {
	display:none;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-body .main {
    margin-top: -10px;
}
.dxbl-popup:has(.wizard-welcome) .dxbl-modal-content .dxbl-modal-body .main {
    margin-top: -10px;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-body {
	padding: 0px !important;
	/* The wizard-step-wrapper owns internal scrolling; keep the modal body from
	   adding its own scrollbar when content lands a hair over the fixed height. */
	overflow: hidden !important;
}
.wizard-step-wrapper:has(.wizard-welcome){
	border: 0px !important;
}

.wizard-footer-button {
    margin: 0px !important;
	border-top:  1px solid rgba(var(--midgrey), 0.25);
	padding: 0px 20px 10px;
	height: 70px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled) {
	border-radius: 8px;
}

.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover {
    border: 1px solid var(--site-primary) !important;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled) {
    border: 1px solid rgba(var(--midgrey), 0.25) !important;
	box-shadow: 0px 0px 0px rgba(var(--primary), 0.5);
	border-radius: 8px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover {
    background-color:rgba(var(--primary), 0.15) !important;
}
.wizard-prev-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/arrow-left") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
}
.wizard-finish-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-close-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-next-btn::after {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/arrow-right") center center no-repeat !important;
	background-size: cover !important;
	margin-left: 5px;
}
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::before,
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::after {
	filter: var(--icon-filter-white);
}
/* The prev/next/finish/close icons are a plain background-image, not a currentColor mask, so
   they don't automatically pick up the button's disabled (dimmed) look the way the text does —
   dim them to match when the button itself is disabled (e.g. Next before validation passes). */
.wizard-footer-button button.dxbl-btn.dxbl-disabled::before,
.wizard-footer-button button.dxbl-btn:disabled::before,
.wizard-footer-button button.dxbl-btn.dxbl-disabled::after,
.wizard-footer-button button.dxbl-btn:disabled::after {
	opacity: .5;
}
/* Both form-ui.css (color: var(--site-primary) !important + a focus-ring box-shadow) and
   detail-view.css (opacity: 1 !important) have near-global button:hover rules that don't
   exclude disabled buttons, so hovering a disabled Next/Prev recolors its text AND un-dims it
   back to a fully "active" look. Neutralize both specifically for disabled wizard footer
   buttons so hovering a disabled button looks the same as not hovering it. */
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover,
.wizard-footer-button button.dxbl-btn:disabled:hover {
	color: inherit !important;
	box-shadow: none !important;
	opacity: .5 !important;
}
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover::before,
.wizard-footer-button button.dxbl-btn:disabled:hover::before,
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover::after,
.wizard-footer-button button.dxbl-btn:disabled:hover::after {
	opacity: .5 !important;
}
.wizard-footer-button button.dxbl-btn.dxbl-btn-primary::before,
.wizard-footer-button button.dxbl-btn.dxbl-btn-primary::after {
	filter: var(--icon-filter-white) !important;
}

.dxbl-modal-body:has(.wizard-step-wrapper) {
	padding: 0px 4px;
}
.wizard-step-wrapper dxbl-form-layout.dxbl-fl {
	overflow: visible;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transition: max-width 0.2s ease-out;
}

/* Two-column detail steps (e.g. New Driver Wizard) render each dxbl-col-md-6 column as its
   own independently-stacked block, so a row that's taller than a plain text input (a
   reference editor with an inline pencil-to-edit link, like Time Zone/Driver Group) throws
   every row below it out of alignment with its counterpart in the other column. Give every
   field row the same minimum height so row N on the left always lines up with row N on the
   right, whatever kind of editor sits in either one. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6) .dxbl-fl-item {
	min-height: 64px;
}

/* The Create Report wizard's Data Source step (ReportWizardDataSourceModel) has a FilterCriteriaOperator
   property using XAF's built-in CriteriaPropertyEditor (.dx-filtereditor). That widget defaults to a tall
   fixed height regardless of how little the criteria tree actually needs, which — stacked under the Data
   Source picker and above the Advanced Mode checkbox — pushes the step's total content past the wizard
   popup's available height and forces the whole step to scroll. Scoped to
   .wizard-step-wrapper.wizard-step-detail so this never reaches the same editor on a plain
   (non-wizard) DetailView elsewhere in the app (e.g. a report definition's own filter). !important is
   required: the widget sets its own height as an inline style, which only a !important rule beats. */
.wizard-step-wrapper.wizard-step-detail .dx-filtereditor {
	height: 160px !important;
}

.wizard-step-wrapper.wizard-step-detail .dx-filtereditor-tree-container {
	overflow-y: auto;
}

.wizard-step-wrapper:has(.wizard-welcome) {
	margin-top: 0px;
	height: 580px;
}
.wizard-heading {
	min-height: 70px;
	margin-top: 0px;
	margin-bottom: 0px !important;
	border-bottom:  1px solid rgba(var(--midgrey), 0.25);
	padding: 15px 20px;
}

.wizard-heading-title {
	gap: 12px;
}

.wizard-heading-icon {
	width: 50px;
	height: 50px;
	padding: 10px;
	border-radius: 50%;
	background-color: rgba(var(--primary), 0.12);
	filter: var(--icon-filter);
}

.wizard-heading-subtitle {
	margin-top: 2px;
}

.wizard-progress {
	min-width: 160px;
	margin-top: 2px;
	/* Clears the popup's own close button, which is absolutely positioned at
	   top:20px/right:20px over this header rather than laid out in the flow. */
	margin-right: 40px;
	padding: 8px 16px;
}

.wizard-progress-label {
	margin-bottom: 2px;
	text-align: left !important;
}

.wizard-progress-track {
	height: 6px;
	width: 100%;
	border-radius: 10px;
	background-color: rgba(var(--midgrey), 0.25);
	overflow: hidden;
}

.wizard-progress-fill {
	height: 100%;
	border-radius: 10px;
	background-color: var(--site-primary);
	transition: width 0.2s ease-out;
}

.wizard-icon {
	display: block;
	width: 110px;
	height: 110px;
	margin-bottom: 16px;
	filter: var(--icon-filter);
}

.wizard-success-icon {
	filter: var(--icon-filter-green);
}

.wizard-step-title {
	margin-bottom: 5px !important;
	text-align: left !important;
	font-size: 1.25rem;
	font-weight: 400 !important;
	transition: max-width 0.2s ease-out;
}

.wizard-step-wrapper.wizard-step-list .wizard-step-title {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
}

.wizard-summary-text {
	max-width: 520px;
	font-size: 1rem;
	line-height: 1.7;
}

.wizard-summary-text p {
	margin-top: 0;
	margin-bottom: -0.3rem;
}

.wizard-step-description {
	/* Same width-capped box as the title/form column — the icon+text sit inset from that edge
	   by this box's own padding, same as any normal callout box, rather than the box itself
	   being wider. !important throughout: needs to beat Bootstrap's own .alert rule at equal
	   specificity, same as the other Bootstrap .alert overrides in this block. */
	width: 100%;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background-color: rgba(var(--lightblue), 0.15) !important;
	border-color: rgba(var(--lightblue), 0.3) !important;
	color: currentColor !important;
	border-radius: 10px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	font-size: 0.875rem;
	transition: max-width 0.2s ease-out;
}

.dxbl-theme-dark .wizard-step-description {
	border-color: rgba(var(--lightblue), 0.5) !important;
	color: currentColor !important;
}

/* List-view steps (map/grid) run edge to edge, so the alert spans full width too. Since it now
   runs flush to the wrapper's own outer edges (not a centered column), it needs its own inset
   back for breathing room — unlike the detail-step case, there's no sibling column to align to. */
.wizard-step-wrapper.wizard-step-list .wizard-step-description {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 16px;
	padding-right: 16px;
}

/* Step-action button row (e.g. "View Map") mirrors the alert's width at every breakpoint
   so its right edge lines up with the alert box instead of the wider outer step wrapper. */
.wizard-step-action-row {
	max-width: var(--wizard-step-max-width);
	transition: max-width 0.2s ease-out;
}
.wizard-step-wrapper.wizard-step-list .wizard-step-action-row {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* A step action (e.g. "View Map") that takes over the step in place draws on top of the
   step's own view as an opaque overlay, rather than hiding/unmounting it — see
   WizardComponent.razor. Keeps the underlying DetailView alive and untouched underneath. */
.wizard-step-replacement-overlay {
	position: absolute;
	inset: 0;
	background: var(--dxbl-body-bg, #1e1e1e);
	z-index: 5;
}

/* The map/grid editor sizes to height:100%, so give its container a real height:
   make the list-view step a flex column and let the view area fill what's left
   under the title + alert. */
.wizard-step-wrapper.wizard-step-list {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper.wizard-step-list .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
	/* The list/grid editor (e.g. a custom card list) sizes to height:100%, but its actual
	   rendered content can be taller than the flex box's allocated space — without clipping,
	   the overflow bleeds straight past this box and visually sits on top of the tip below it.
	   This only applies to short, non-scrolling lists; real data grids override this below. */
	overflow: hidden;
}

/* A real data grid (e.g. the Customer picker) needs its own internal scrollbar for
   potentially hundreds of rows, so it can't be clipped like the short card-list case above —
   and there isn't room for both a scrollable grid and a tip, so the tip is dropped here to
   give the grid all the available vertical space. */
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view {
	/* The grid gets its own bounded height below so ITS internal viewport scrolls
	   (sticky header + pager), not this box — no need for this box to scroll too. */
	overflow: hidden;
	margin-top: -5px !important;
}
/* XAF's ListView only gets a real (non-auto) height from its own default CSS via
   ancestor selectors like ".main-content > .grid-content" — none of which match here,
   since the wizard hosts the ListView inside .wizard-step-view, not .main-content. Without
   this, the grid renders every row at full natural height, so instead of the grid's own
   body scrolling under a fixed header/pager, the entire grid (header + rows + pager)
   overflows and .wizard-step-wrapper ends up scrolling the whole step as one block. */
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view .main-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view .grid-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view dxbl-grid {
	max-height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-tip {
	display: none;
}
/* DraggableGridListEditor (Create Report wizard's Columns/Sorting steps) wraps its DxGrid in its
   own ".draggable-grid" div rather than XAF's standard ".main-content"/".grid-content" chrome, so
   the height:100% overrides above don't reach it the same way — its default CSS
   (draggable-grid.css) sizes to height:100% of its own immediate parent, which isn't
   guaranteed to have a definite (non-auto) height inside .wizard-step-view. Pinning it via
   position:absolute + inset:0 against .wizard-step-view's own "position:relative" (set inline in
   WizardComponent.razor) sidesteps the percentage-height chain entirely — the same technique
   .wizard-step-replacement-overlay already uses to fill this same box regardless of what sits
   between them. */
.wizard-step-wrapper.wizard-step-list .wizard-step-view .draggable-grid {
	position: absolute;
	inset: 0;
	height: auto;
}

/* Same fix, but for a step-action's replacement content (e.g. "View Map" on a DetailView
   step) — .wizard-step-wrapper has a fixed height regardless of step type, and .wizard-step-view
   otherwise only sizes to the (shorter) underlying form's natural height, leaving the overlay's
   own background showing as a gap below the map. Stretch it to fill what's actually available. */
.wizard-step-wrapper:has(.wizard-step-replacement-overlay) {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper:has(.wizard-step-replacement-overlay) .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
	/* The underlying form (DynamicWizardView) is a normal-flow child, not absolutely
	   positioned, so when this box is shorter than the form's full natural content height
	   (several fields), the form overflows past the bottom edge — right past where the
	   overlay's own inset:0 coverage ends. Clip it so nothing leaks out below the map. */
	overflow: hidden;
}

.wizard-step-description strong {
	color: #1f6fb2;
}

.wizard-alert-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-top: -1px;
	filter: var(--icon-filter-blue);
}

.wizard-step-tip {
	/* Same width-capped box as the title/form/alert column, with its own inset padding below. */
	width: 100%;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	background-color: rgba(var(--midgrey), 0.1);
	border-radius: 10px;
	font-size: 14px;
	transition: max-width 0.2s ease-out;
}

/* Dock the tip to the bottom of the step regardless of how short the content above it is,
   instead of floating right under it with dead space before the footer. */
.wizard-step-wrapper.wizard-step-detail {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper.wizard-step-detail .wizard-step-tip,
.wizard-step-wrapper.wizard-step-list .wizard-step-tip {
	margin-top: auto;
}

.wizard-step-wrapper.wizard-step-list .wizard-step-tip {
	max-width: none !important;
	width: 100%;
	margin-top: 10px !important;
	margin-bottom: -10px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 10px !important;
}

.wizard-tip-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	margin-top: 1px;
	filter: var(--icon-filter);
}

.summary-card {
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--midgrey),0.25);
}

    .summary-row:last-child {
        border-bottom: none;
    }

.summary-label {
    font-weight: 600;
    color: currentColor;
    font-size: 13px;
}

.summary-value {
    color: currentColor;
    font-size: 14px;
}

.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.summary-badge {
    background: var(--bs-body-bg);
    color: currentColor;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
	border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-empty {
    color: #888;
    font-style: italic;
}
@media (max-width: 1250px) and (max-height: 900px) {
.dxbl-popup:has(.wizard-step-wrapper) {
	height: 640px !important;
}
.wizard-step-wrapper:has(.wizard-welcome),
.wizard-step-wrapper {
  margin-top: 0px;
  height: 500px;
}
}