/* Opt-in presentation for entity Details and Address tabs in both active hosts.
   Field wrappers, permissions and Syncfusion control geometry remain unchanged. */
.wfx-details-design {
    --details-bg: #1f1e22;
    --details-surface: #282828;
    --details-surface-2: #353434;
    --details-border: rgba(255, 255, 255, .14);
    --details-muted: #b8bdc7;
    --details-accent: #75b9fa;
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    padding: 16px;
    color: #f3f4f6;
}

.wfx-details-design .details-heading,
.wfx-details-design .details-toolbar,
.wfx-details-design .details-status-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wfx-details-design .details-heading {
    justify-content: space-between;
    margin-bottom: 20px;
}

.wfx-details-design .details-heading > div {
    min-width: 0;
}

.wfx-details-design .details-heading h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: inherit;
}

.wfx-details-design .details-heading p {
    margin: 0;
    color: var(--details-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-toolbar .e-btn {
    min-height: 44px;
}

.wfx-details-design .details-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}

.wfx-details-design .details-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--details-border);
    border-radius: 12px;
    background: var(--details-surface);
}

.wfx-details-design .details-panel-wide {
    grid-column: 1 / -1;
}

.wfx-details-design .details-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}

.wfx-details-design .details-panel-title i {
    color: #75b9fa;
}

.wfx-details-design .details-panel:focus-within {
    border-color: #75b9fa;
}

.wfx-details-design .details-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.wfx-details-design .details-field-row > .col-md {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

.wfx-details-design .details-panel > .details-field-row + .details-field-row {
    margin-top: 16px;
}

.wfx-details-design > form > fieldset {
    min-width: 0;
}

.wfx-details-design .details-status-option {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: #353434;
}

.wfx-details-design .details-save {
    position: static;
    z-index: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--details-border);
    background: none;
    cursor: auto;
}

.wfx-details-design .details-save > button[type="submit"] {
    min-height: 44px;
    min-width: 100px;
    background: #1b6ec2;
    color: #fff;
    border-radius: 10px;
}

.wfx-details-design .details-save .validation-errors {
    flex-basis: 100%;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-save > button:focus-visible {
    outline: 2px solid #9dceff;
    outline-offset: 3px;
}

.wfx-details-design .details-address-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.wfx-details-design .details-address-actions .e-btn {
    min-height: 44px;
    white-space: normal;
}

.wfx-details-design.wfx-address-design .details-panel > .details-field-row:first-of-type {
    margin-top: 0;
}

.wfx-details-design .details-address-map {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design .details-quick-stats {
    margin-bottom: 20px;
}

.wfx-details-design .details-stats-grid {
    display: grid;
    /* Respond to the dialog's width, not the viewport's Bootstrap breakpoint. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 16px;
    padding: 12px 0;
}

.wfx-details-design .details-stat {
    min-width: 0;
}

.wfx-details-design .details-stat .statbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--details-border);
    border-radius: 12px;
    background: var(--details-surface);
}

.wfx-details-design .details-stat .statbox-title,
.wfx-details-design .details-stat .statbox-content {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-stat .statbox-title h6 {
    margin: 0;
    color: var(--details-muted);
    font-size: 14px;
    line-height: 1.5;
}

.wfx-details-design .details-stat .statbox-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.wfx-details-design .details-stat .statbox-content a {
    color: #75b9fa;
}

.wfx-details-design .details-stat .statbox-content a:focus-visible {
    outline: 2px solid #9dceff;
    outline-offset: 3px;
}

.wfx-details-design .details-pricing-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 8px;
}

.wfx-details-design .details-pricing-indicator {
    position: relative;
    flex: 0 0 32px;
    height: 32px;
}

/* Dialogs opt in explicitly; record/create shells and nested child dialogs
   keep their existing presentation. Native dialog footer behavior is retained. */
.wfx-details-design.wfx-details-dialog {
    padding: 0;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--details-border);
    border-radius: 12px;
    background: #1e1d21;
}

.wfx-details-design.wfx-details-dialog > .e-dlg-header-content {
    padding: 16px;
    border-bottom: 1px solid var(--details-border);
    background: transparent;
}

.wfx-details-design.wfx-details-dialog > .e-dlg-header-content > .e-dlg-header {
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-dialog-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #f3f4f6;
}

.wfx-details-design.wfx-details-dialog > .e-dlg-content {
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow: auto;
}

.wfx-details-design .details-dialog-content {
    min-width: 0;
    padding: 16px;
}

.wfx-details-design .details-dialog-content fieldset {
    min-width: 0;
}

.wfx-details-design .details-dialog-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.wfx-details-design .details-panel.details-dialog-stack > .details-panel-title,
.wfx-details-design .details-panel.details-dialog-stack > .details-dialog-helper,
.wfx-details-design .details-panel.details-dialog-stack > .details-product-actions,
.wfx-details-design .details-panel.details-dialog-stack > .details-dialog-actions {
    margin: 0;
}

.wfx-details-design .details-dialog-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 16px;
}

.wfx-details-design .details-dialog-field {
    min-width: 0;
}

.wfx-details-design .details-dialog-helper {
    margin: 12px 0;
    font-size: 13px;
    color: var(--details-muted);
    overflow-wrap: anywhere;
}

.wfx-details-design .details-dialog-message {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    color: var(--details-muted);
    overflow-wrap: anywhere;
}

.wfx-details-design .details-dialog-warning {
    border-color: #7a5d00;
    color: #ffcc66;
    background: #332900;
}

.wfx-details-design .details-address-search,
.wfx-details-design .details-search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wfx-details-design .details-address-search .wfx-nested-search-field,
.wfx-details-design .details-search-toolbar .wfx-nested-search-field {
    flex: 1 1 240px;
    min-width: 0;
}

.wfx-details-design .details-address-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: #353434;
}

.wfx-details-design .details-address-result + .details-address-result {
    margin-top: 12px;
}

.wfx-details-design .details-address-text {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-address-search .e-btn,
.wfx-details-design .details-search-toolbar .e-btn,
.wfx-details-design .details-address-result .e-btn {
    min-height: 44px;
}

.wfx-details-design .details-search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 12px;
    margin-top: 12px;
}

.wfx-details-design .details-search-filters > div,
.wfx-details-design .details-search-results {
    min-width: 0;
}

/* Keep Virtualize's spacers untouched and retain the dialog as scroll owner.
   Only actual item content receives separators and compact row treatment. */
.wfx-details-design .details-search-item {
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--details-border);
}

/* These existing row components are reused outside search. Match their known
   inline surface only inside an opted-in result item, not nested dialogs. */
.wfx-details-design .details-search-item > div[style*="background:#555555"] {
    min-width: 0;
    background: transparent !important;
}

.wfx-details-design .details-search-item > div[style*="background:#555555"] > .row {
    gap: 8px;
    margin: 0 !important;
    padding: 6px 0;
}

.wfx-details-design .details-search-item > div[style*="background:#555555"] > .row > div {
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-search-item > div[style*="background:#555555"] .e-btn {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design .details-search-item > div[style*="background:#555555"] a {
    color: #75b9fa;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-product-name {
    margin: 0 0 12px;
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-product-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-product-facts > div {
    min-width: 0;
    padding: 6px 0;
}

.wfx-details-design .details-product-facts > div + div {
    border-top: 1px solid var(--details-border);
}

.wfx-details-design .details-product-facts b {
    margin-right: 6px;
    color: var(--details-muted);
}

.wfx-details-design .details-product-facts a {
    color: #75b9fa;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-product-media {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design .details-product-media img {
    max-width: 100%;
    object-fit: contain;
}

.wfx-details-design .details-product-media .carousel-sample {
    height: auto;
    margin: 0 auto;
}

.wfx-details-design .details-product-media .content-wrapper {
    min-width: 0;
    padding: 0;
}

.wfx-details-design .details-product-price {
    min-width: 0;
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-product-actions,
.wfx-details-design .details-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.wfx-details-design .details-product-actions .e-btn,
.wfx-details-design .details-dialog-actions .e-btn {
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    white-space: normal;
}

.wfx-details-design .details-product-section {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.wfx-details-design .details-product-section > div {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design .details-dialog-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.wfx-details-design .details-dialog-options > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: #353434;
}

.wfx-details-design.wfx-details-dialog > .e-footer-content {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--details-border);
    background: transparent;
}

.wfx-details-design.wfx-details-dialog > .e-footer-content .e-btn {
    min-height: 44px;
    margin: 0;
    white-space: normal;
}

.wfx-details-design.wfx-details-dialog > .e-footer-content .e-primary:not(.e-danger) {
    background: #1b6ec2;
    color: #fff;
    border-color: #1b6ec2;
}

.wfx-details-design .details-dialog-table-scroll {
    min-width: 0;
    max-width: 100%;
    max-height: 500px;
    overflow: auto;
}

.wfx-details-design .details-dialog-table {
    width: 100%;
    border-collapse: collapse;
    color: #f3f4f6;
    font-size: 14px;
}

.wfx-details-design .details-dialog-table th {
    padding: 12px;
    border-bottom: 1px solid var(--details-border);
    background: #353434;
    color: var(--details-muted);
    text-align: left;
}

.wfx-details-design .details-dialog-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--details-border);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.wfx-details-design .details-dialog-table .e-btn {
    min-height: 44px;
    white-space: normal;
}

/* Company and Settings forms share the existing panel palette, not app-wide styles. */
.wfx-details-design.wfx-company-details-tab,
.wfx-details-design.wfx-settings-design {
    min-width: 0;
    width: 100%;
}

.wfx-details-design.wfx-company-details-tab .details-fields-grid,
.wfx-details-design.wfx-settings-design .wfx-settings-content {
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.wfx-details-design.wfx-settings-design .wfx-settings-heading > div {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 !important;
}

.wfx-details-design.wfx-settings-design .wfx-settings-heading .details-panel-title {
    margin-bottom: 0;
}

.wfx-details-design.wfx-settings-design .wfx-settings-field {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.wfx-details-design.wfx-settings-design .wfx-settings-field > .e-input-group {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-settings-design .wfx-settings-toggle,
.wfx-details-design.wfx-settings-design .wfx-settings-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 0;
    border-bottom: 1px solid var(--details-border);
}

.wfx-details-design.wfx-settings-design .wfx-settings-inline-editor {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-settings-design .wfx-settings-inline-editor > .e-input-group {
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-settings-design .wfx-settings-additional,
.wfx-details-design.wfx-settings-design .wfx-settings-additional > .e-accordion {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-settings-design .wfx-settings-status-name {
    flex: 1 1 180px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-settings-design .project-status-actions .e-btn {
    min-height: 44px;
    white-space: normal;
}

.wfx-details-design.wfx-settings-design .wfx-settings-label,
.wfx-details-design.wfx-settings-design .wfx-settings-value {
    min-width: 0;
    max-width: 100%;
    width: auto;
    padding: 0;
    margin: 0 !important;
}

.wfx-details-design.wfx-settings-design .wfx-settings-value {
    justify-self: end;
}

.wfx-details-design.wfx-settings-design .wfx-settings-label,
.wfx-details-design.wfx-settings-design .wfx-settings-help {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-settings-design .wfx-settings-help {
    width: auto;
    max-width: 100%;
    padding: 0;
    color: var(--details-muted);
}

.wfx-details-design.wfx-settings-design .wfx-settings-help a {
    color: var(--details-accent);
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-settings-design .wfx-settings-actions {
    align-items: center;
    gap: 12px;
}

.wfx-details-design.wfx-settings-design .wfx-settings-actions .e-btn,
.wfx-details-design.wfx-settings-design .details-save .e-btn,
.wfx-details-design.wfx-company-details-tab .details-save .e-btn {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumptions-list,
.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumption-editor {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumption-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--details-border);
}

.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumption-editor .e-inplaceeditor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumption-editor .e-editable-value {
    white-space: normal;
    overflow-wrap: anywhere;
    color: #f3f4f6;
}

.wfx-details-design.wfx-working-assumptions-dialog .wfx-working-assumption-remove .e-btn {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
}

/* Payment records and schedules keep their existing virtualizers and actions. */
.wfx-details-design.wfx-invoice-payments-tab .details-payments-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 20px;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payments-summary strong {
    color: #f3f4f6;
    font-size: 20px;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payments-summary span {
    color: var(--details-muted);
    font-size: 13px;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payments-list,
.wfx-details-design.wfx-payment-stages-dialog .details-payment-stages-list {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payments-empty,
.wfx-details-design.wfx-invoice-payments-tab .details-payments-loading {
    padding: 16px 0;
    color: var(--details-muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payments-empty p {
    margin: 0 0 8px;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-row,
.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-row {
    min-width: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--details-border);
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 16px;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-fields > div,
.wfx-details-design.wfx-invoice-payments-tab .details-payment-type > .col-md {
    min-width: 0;
    max-width: 100%;
    padding: 0;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-fields .e-input-group {
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.wfx-details-design.wfx-invoice-payments-tab .details-payment-actions .e-btn,
.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields > div:last-child .e-btn {
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
}

.wfx-details-design.wfx-invoice-payments-tab .details-save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 0;
    background: var(--details-bg);
}

.wfx-details-design.wfx-invoice-payments-tab .details-save .e-btn {
    min-height: 44px;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stages-summary {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: var(--details-surface);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stages-toolbar {
    justify-content: space-between;
    margin: 0;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stages-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 44px;
    align-items: end;
    gap: 12px;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields > div {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields .e-input-group {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-deposit {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 8px 0 0;
}

.wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-deposit label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
}

/* Compact onboarding card only; the Estimates list keeps its existing theme. */
.wfx-details-design.wfx-next-steps {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    margin: 8px 0 16px;
    padding: 0;
}

.wfx-details-design.wfx-next-steps .details-next-steps-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-left: 3px solid #75b9fa;
    background: linear-gradient(135deg, var(--details-surface), var(--details-surface-2));
}

.wfx-details-design.wfx-next-steps .details-next-steps-title {
    display: flex;
    flex: 1 1 120px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: #f3f4f6;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
}

.wfx-details-design.wfx-next-steps .details-next-steps-icon {
    flex: 0 0 20px;
    color: var(--details-accent);
    font-size: 18px;
}

.wfx-details-design.wfx-next-steps .details-next-steps-actions {
    flex: 1 1 220px;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.wfx-details-design.wfx-next-steps .details-next-steps-action.e-btn {
    min-height: 44px;
    max-width: 100%;
    margin: 0 !important;
    color: #b8dcff;
    border-color: rgba(117, 185, 250, .55);
    background: rgba(67, 127, 196, .15);
    white-space: normal;
}

.wfx-details-design.wfx-next-steps .details-next-steps-action.e-btn:hover {
    background: rgba(67, 127, 196, .28);
}

.wfx-details-design.wfx-next-steps .details-next-steps-action.e-btn:focus-visible {
    outline: 2px solid #75b9fa;
    outline-offset: 2px;
}

/* Creation forms retain their original submit/recurrence behavior. */
.wfx-details-design.wfx-reminder-create-dialog .wfx-reminder-repeat-row,
.wfx-details-design.wfx-reminder-create-dialog .wfx-reminder-repeat-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wfx-details-design.wfx-reminder-create-dialog .wfx-reminder-repeat-row > .details-dialog-field {
    flex: 1 1 160px;
    min-width: 0;
}

.wfx-details-design.wfx-reminder-create-dialog .wfx-reminder-repeat-row label,
.wfx-details-design.wfx-reminder-create-dialog .wfx-reminder-repeat-mode label {
    margin: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-reminder-create-dialog .details-save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 0;
    background: var(--details-bg);
}

.wfx-details-design.wfx-note-create-dialog .wfx-note-editor,
.wfx-details-design.wfx-note-create-dialog .wfx-note-editor .e-richtexteditor {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* User assignment tabs keep their native grids and permission matrix. */
.wfx-details-design.wfx-user-jobtypes .wfx-user-assignment-panel,
.wfx-details-design.wfx-user-skills .wfx-user-assignment-panel,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-setup,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-form,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-matrix,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-tabs,
.wfx-details-design.wfx-user-jobtypes .wfx-user-capability-grid,
.wfx-details-design.wfx-user-skills .wfx-user-capability-grid {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-user-jobtypes .wfx-user-capability-help,
.wfx-details-design.wfx-user-skills .wfx-user-capability-help,
.wfx-details-design.wfx-user-permissions .wfx-user-capability-help {
    margin: 0 0 12px;
    color: var(--details-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-user-jobtypes .wfx-assignment-toolbar,
.wfx-details-design.wfx-user-skills .wfx-assignment-toolbar,
.wfx-details-design.wfx-user-jobtypes .wfx-assignment-description,
.wfx-details-design.wfx-user-skills .wfx-assignment-description {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wfx-details-design.wfx-user-jobtypes .wfx-assignment-content,
.wfx-details-design.wfx-user-skills .wfx-assignment-content {
    margin-top: 0 !important;
    padding: 0;
}

.wfx-details-design.wfx-user-jobtypes .wfx-assignment-selector,
.wfx-details-design.wfx-user-skills .wfx-assignment-selector,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    min-width: 0;
    margin-bottom: 16px;
}

.wfx-details-design.wfx-user-jobtypes .wfx-assignment-selector > .e-input-group,
.wfx-details-design.wfx-user-skills .wfx-assignment-selector > .e-input-group,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-copy > .e-input-group {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-user-jobtypes .e-btn,
.wfx-details-design.wfx-user-skills .e-btn,
.wfx-details-design.wfx-user-permissions .wfx-user-permissions-copy-action {
    min-height: 44px;
    white-space: normal;
}

.wfx-details-design.wfx-user-jobtypes .wfx-user-capability-grid .e-rowcell,
.wfx-details-design.wfx-user-skills .wfx-user-capability-grid .e-rowcell,
.wfx-details-design.wfx-user-jobtypes .wfx-user-capability-grid .e-headercell,
.wfx-details-design.wfx-user-skills .wfx-user-capability-grid .e-headercell {
    padding: 10px 12px;
    border-color: var(--details-border);
    color: #f3f4f6;
}

.wfx-details-design.wfx-user-jobtypes .wfx-user-capability-grid .e-headercell,
.wfx-details-design.wfx-user-skills .wfx-user-capability-grid .e-headercell {
    background: var(--details-surface-2);
    color: var(--details-muted);
}

.wfx-details-design.wfx-user-jobtypes .wfx-user-assignment-name,
.wfx-details-design.wfx-user-skills .wfx-user-assignment-name {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permissions-template > .col-md {
    min-width: 0;
    padding: 0;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permissions-tabs > .e-tab {
    height: auto !important;
    max-width: 100%;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    margin-top: 12px;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-scroll:focus-visible {
    outline: 2px solid #75b9fa;
    outline-offset: -2px;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group {
    min-width: 720px;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group > .row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(96px, 1fr));
    gap: 12px;
    align-items: center;
    margin: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--details-border);
    color: #f3f4f6;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group-general {
    min-width: 660px;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group-general > .row {
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(96px, 1fr));
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group > .row:first-child {
    background: var(--details-surface-2);
    color: var(--details-muted);
    font-weight: 600;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group > .row > .col {
    min-width: 0;
    max-width: 100%;
    width: auto;
    padding: 0;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group > .row > .col > span {
    font-size: 13px !important;
    color: inherit !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-user-permissions .wfx-user-permission-group .e-checkbox-wrapper label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
}

/* Financial strips are embedded surfaces, not full materials-page restyling. */
.wfx-details-design.wfx-financial-totals {
    max-width: none;
    padding: 0;
}

.wfx-details-design.wfx-financial-totals .details-financial-totals-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.wfx-details-design.wfx-financial-totals .details-financial-metric {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-financial-totals .details-financial-metric .e-input-group {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin-right: 0 !important;
}

.wfx-details-design.wfx-financial-totals .details-financial-metric input {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.wfx-details-design.wfx-financial-totals .details-financial-totals-actions .e-btn {
    min-height: 44px;
    max-width: 100%;
    margin: 0 !important;
    white-space: normal;
}

/* Keep the Sales tab's existing isolated field geometry and fixed-save area;
   override only its palette and the generic details-save positioning. */
.wfx-details-design.wfx-customer-sales.customer-sales-page {
    max-width: none;
    padding: 0;
}

.wfx-details-design.wfx-customer-sales .customer-sales-section {
    background: var(--details-surface);
    border-color: var(--details-border);
    border-radius: 12px;
}

.wfx-details-design.wfx-customer-sales .customer-sales-heading {
    color: var(--details-muted);
    border-color: var(--details-border);
}

.wfx-details-design.wfx-customer-sales.customer-sales-page .customer-sales-actions {
    position: fixed;
    z-index: 1600;
    margin-top: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--details-surface);
    border-color: var(--details-border);
}

.wfx-details-design.wfx-customer-sales.customer-sales-page .customer-sales-content {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.wfx-details-design.wfx-customer-sales.customer-sales-page:has(.validation-errors) .customer-sales-content {
    padding-bottom: calc(224px + env(safe-area-inset-bottom, 0px));
}

/* Screenshot-selected utility dialogs retain their own workflows and controls. */
.wfx-details-design.wfx-measurements-dialog .details-measurements-region,
.wfx-details-design.wfx-measurements-dialog .details-measurements-list,
.wfx-details-design.wfx-summary-main-dialog .wfx-summary-rich-editor,
.wfx-details-design.wfx-summary-trade-dialog .wfx-summary-plain-editor,
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords,
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(120px, .7fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border-bottom: 1px solid var(--details-border);
    color: #f3f4f6;
}

.wfx-details-design.wfx-measurements-dialog .rowCSSsXCGG {
    background: var(--details-surface);
}

.wfx-details-design.wfx-measurements-dialog .rowCSSsXNCGG {
    background: var(--details-surface-2);
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-description {
    grid-column: 1 / -1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-description .e-inplaceeditor,
.wfx-details-design.wfx-measurements-dialog .details-measurement-units .e-input-group {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-description .e-editable-value {
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-quantity,
.wfx-details-design.wfx-measurements-dialog .details-measurement-units {
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.wfx-details-design.wfx-measurements-dialog .details-measurement-actions .e-btn {
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette {
    overflow-x: auto;
    padding: 4px 0;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette,
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-container,
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-palette {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding: 0;
}

/* Keep the vendor's four/seven-column keyboard order; scroll only on very
   narrow web viewports rather than visually reordering palette rows. */
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-tile {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-tile::before {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-tile:hover {
    transform: none;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .e-btn {
    min-width: 44px;
    min-height: 44px;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords .e-chip-set,
.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords .e-chip-list {
    max-width: 100%;
    flex-wrap: wrap;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords .e-chip {
    min-height: 44px;
    max-width: 100%;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords .e-chip-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-logo-generation-dialog .wfx-logo-keywords .e-chip-delete {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wfx-details-design.wfx-logo-upload-dialog .wfx-logo-file-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--details-border);
    border-radius: 6px;
    background: var(--details-surface);
    color: #f3f4f6;
}

.wfx-details-design.wfx-logo-upload-dialog .wfx-logo-file-input::file-selector-button {
    min-height: 44px;
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid var(--details-border);
    border-radius: 6px;
    background: var(--details-surface-2);
    color: inherit;
}

.wfx-details-design.wfx-logo-upload-dialog .wfx-logo-preview {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.wfx-details-design.wfx-logo-upload-dialog .wfx-logo-matching-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wfx-details-design.wfx-summary-main-dialog .wfx-summary-rich-editor .e-richtexteditor,
.wfx-details-design.wfx-summary-main-dialog .summary-save-options .e-input-group,
.wfx-details-design.wfx-summary-trade-dialog .wfx-summary-plain-editor .e-input-group {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-summary-main-dialog .summary-save-options,
.wfx-details-design.wfx-summary-trade-dialog .details-panel-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-summary-trade-dialog .wfx-summary-plain-editor textarea {
    min-height: 220px;
    max-height: 55vh;
    resize: vertical;
}

/* Request workflows and management menus opt in without changing shared lists. */
.wfx-details-design.wfx-quote-request-dialog .wfx-request-workflow-tabs,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-tab-content,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-file-input,
.wfx-details-design.wfx-document-manager-dialog .details-management-selector {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-tab-content {
    padding-top: 12px;
}

.wfx-details-design.wfx-quote-request-dialog .e-richtexteditor,
.wfx-details-design.wfx-request-status-dialog .e-richtexteditor,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-file-input input[type="file"] {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list,
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: var(--details-surface);
    color: #f3f4f6;
}

/* The fixed-height request item list keeps its own native scroll region.
   Auto-height manager lists instead use the dialog's content scroll region. */
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list {
    overflow: visible !important;
}

.wfx-details-design.wfx-document-manager-dialog .details-management-selector {
    width: 100%;
}

.wfx-details-design.wfx-document-manager-dialog .details-management-action .rb-frame,
.wfx-details-design.wfx-document-manager-dialog .details-management-action .rb-target {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list .e-list-item,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .e-list-item,
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list .e-list-item {
    height: auto;
    min-height: 0;
    padding: 0;
    white-space: normal;
    border-bottom: 1px solid var(--details-border);
    background: var(--details-surface) !important;
    color: #f3f4f6;
    line-height: 1.45;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list .e-list-item:hover,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .e-list-item:hover,
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list .e-list-item:hover {
    background: var(--details-surface-2) !important;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list .e-list-item.e-active,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-list .e-list-item.e-focused,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .e-list-item.e-selected,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .e-list-item.e-focused,
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list .e-list-item.e-active,
.wfx-details-design.wfx-document-manager-dialog .wfx-document-manager-list .e-list-item.e-focused {
    background: rgba(67, 127, 196, .24) !important;
    outline: 1px solid #75b9fa;
    outline-offset: -1px;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list-row,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-item,
.wfx-details-design.wfx-document-manager-dialog .details-management-action {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    color: #f3f4f6;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-remove {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: #ffb4ab;
    cursor: pointer;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-remove::after {
    content: "\00d7";
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-item .e-list-item-header,
.wfx-details-design.wfx-quote-request-dialog .wfx-request-item .e-list-content,
.wfx-details-design.wfx-document-manager-dialog .details-management-label {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    color: inherit;
}

/* ListBox templates can inherit light-theme text colors from their host.
   Pin only request descriptions/quantities; leave checkbox disabled cues intact. */
.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .wfx-request-item .e-list-item-header {
    color: #f3f4f6 !important;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-items-list .wfx-request-item .e-list-content {
    color: #c6ced8 !important;
}

.wfx-details-design.wfx-quote-request-dialog .wfx-request-invitee strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-request-recipient-dialog .wfx-request-recipient-table {
    min-width: 600px;
}

.wfx-details-design.wfx-request-recipient-dialog .details-panel-title {
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-request-status-dialog .wfx-request-status-table {
    min-width: 400px;
}

/* Compact selectable change-order rows; the dialog owns scrolling and actions. */
.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-row {
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--details-border);
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-label {
    flex: 1 1 240px;
    min-width: 0;
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-label .e-checkbox-wrapper {
    min-height: 44px;
    max-width: 100%;
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-label .e-checkbox-wrapper label {
    display: flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-label .e-frame {
    flex: 0 0 auto;
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-label .e-label {
    flex: 1 1 0%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-amount {
    min-width: 0;
    margin-left: auto;
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Inventory and fixed-price workflows retain native grid/adaptive row behavior.
   Grid content owns its scroll region; no extra table-scroll wrapper is added. */
.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-tabs,
.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-grid,
.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-grid,
.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid {
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: var(--details-surface);
}

.wfx-details-design.wfx-inventory-workflow-dialog .details-panel > .details-field-row + .details-field-row {
    margin-top: 12px !important;
}

.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-grid .e-rowcell,
.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-grid .e-headercell,
.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid .e-rowcell,
.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid .e-headercell {
    padding: 10px 12px;
    border-color: var(--details-border);
    color: #f3f4f6;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-inventory-workflow-dialog .wfx-inventory-workflow-grid .e-headercell,
.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid .e-headercell {
    background: #353434;
    color: var(--details-muted);
}

.wfx-details-design.wfx-fixed-price-dialog .wfx-fixed-price-grid .e-btn {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

/* Bundle rows reuse their shared editors without changing other hosts.
   Only item wrappers are styled; Virtualize spacers have no gap/margin rules.
   The dialog content is the sole scroll owner and Save uses its native footer. */
.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part {
    min-width: 0;
    padding: 12px !important;
    border-radius: 8px;
    background: var(--details-surface) !important;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > span,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > span {
    display: block;
    min-width: 0;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > span > .row,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > span > .row {
    margin: 0;
    gap: 12px;
    align-items: end;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row {
    display: grid;
    grid-template-columns: 80px minmax(120px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) 44px;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > span > .row > div,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > span > .row > div {
    min-width: 0 !important;
    max-width: 100%;
    padding: 0;
    margin: 0 !important;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header .e-input-group,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header .e-input-group {
    width: 100% !important;
    min-width: 0;
    margin-right: 0 !important;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header .e-btn,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header .e-btn,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content .e-btn {
    min-width: 44px;
    min-height: 44px;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header .mr-3,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header .mr-3 {
    margin-right: 0 !important;
}

.wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-content,
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content {
    margin-top: 12px;
    overflow-wrap: anywhere;
}

/* No spacing or overflow rules are applied to Virtualize's spacer elements. */
.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-list {
    min-width: 0;
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--details-border);
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row {
    display: grid;
    grid-template-columns: 72px repeat(auto-fit, minmax(110px, 1fr)) 44px;
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > span > .row > div {
    max-width: 100% !important;
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row > div:last-child {
    grid-column: -2;
    grid-row: 1;
    justify-self: end;
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px minmax(160px, .35fr);
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content > .row > div {
    width: 100%;
}

.wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content .e-btn {
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design.wfx-document-bundle-dialog .details-bundle-summary {
    margin-top: 16px;
}

.wfx-details-design.wfx-document-bundle-dialog .details-bundle-summary .mdc-button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design.wfx-document-bundle-dialog .details-bundle-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-width: 0;
}

.wfx-details-design.wfx-document-bundle-dialog .details-bundle-totals > .details-dialog-field > .e-input-group {
    width: 100% !important;
    min-width: 0;
    margin-right: 0 !important;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-document-bundle-dialog .details-bundle-totals > .details-dialog-field > .col-md {
    min-width: 0;
    width: 100%;
    padding: 0;
}

/* Plan attachment picker only. The dialog content owns scrolling; template
   list and thumbnail wrappers remain auto-height, including on narrow screens. */
.wfx-details-design.wfx-plans-select-dialog.e-dialog {
    max-width: 98vw !important;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-document,
.wfx-details-design.wfx-plans-select-dialog .plans-select-pages {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-document .e-input-group {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-actions {
    gap: 8px;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-actions .e-btn {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    white-space: normal;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-empty {
    margin: 0;
    padding: 20px;
    background: var(--details-surface);
    line-height: 1.5;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #f3f4f6;
    font-size: 15px;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-empty p,
.wfx-details-design.wfx-plans-select-dialog .plans-select-pages > .details-panel-title {
    margin: 0;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-list,
.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-parent {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    overflow: visible !important;
    padding: 0;
    border: 0;
    background: transparent;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin: 0;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-item {
    box-sizing: border-box;
    float: none;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--details-border);
    border-radius: 10px;
    background: var(--details-surface) !important;
    color: #f3f4f6;
    white-space: normal;
    line-height: 1.45;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-item:hover,
.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-item:focus-within,
.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-list-item.e-focused {
    border-color: var(--details-accent);
    outline: 1px solid var(--details-accent);
    outline-offset: -1px;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-list .e-blazor-template,
.wfx-details-design.wfx-plans-select-dialog .plans-select-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-card-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-page-number {
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-preview {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 240px;
    padding: 8px;
    background: var(--details-bg);
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-preview > div,
.wfx-details-design.wfx-plans-select-dialog .ai-thumbnail-overlay-wrap {
    min-width: 0;
    max-width: 100%;
}

.wfx-details-design.wfx-plans-select-dialog .ai-thumbnail-overlay-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Override PlanImage's inline 270px limit only inside this picker. The SVG
   remains sized to the actual image wrapper rather than the preview stage. */
.wfx-details-design.wfx-plans-select-dialog .plans-select-preview img {
    max-width: 100% !important;
    max-height: 224px !important;
    width: auto;
    height: auto;
    object-fit: contain;
}

.wfx-details-design.wfx-plans-select-dialog .ai-thumbnail-polygon-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-include {
    margin-top: auto;
    padding: 4px 10px;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-checkbox,
.wfx-details-design.wfx-plans-select-dialog .plans-select-checkbox label {
    display: flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
}

.wfx-details-design.wfx-plans-select-dialog .plans-select-checkbox .e-label {
    color: #f3f4f6;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-plans-select-dialog .ai-processing-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--details-border);
    border-radius: 8px;
    background: var(--details-surface);
    color: #f3f4f6;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-plans-select-dialog .ai-processing-summary > span {
    flex: 1 1 200px;
    min-width: 0;
}

.wfx-details-design.wfx-plans-select-dialog .ai-processing-summary > button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

.wfx-details-design.wfx-plans-select-dialog .ai-page-status {
    position: static;
    z-index: auto;
    min-width: 0;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .62);
    color: #f3f4f6;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-plans-select-dialog .ai-processing-active,
.wfx-details-design.wfx-plans-select-dialog .ai-processing-queued { color: #ffcc66; }
.wfx-details-design.wfx-plans-select-dialog .ai-processing-complete { color: #6ee56e; }
.wfx-details-design.wfx-plans-select-dialog .ai-processing-failed { color: #ff8a8a; }
.wfx-details-design.wfx-plans-select-dialog .ai-processing-cancelled { color: #d6d6d6; }

/* Compact confirmations retain their message/options and native footer;
   only spacing and readability change, not default/destructive actions. */
.wfx-details-design.wfx-confirmation-dialog > .e-dlg-content {
    padding: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wfx-details-design.wfx-confirmation-dialog > .e-dlg-header-content > .e-dlg-header {
    color: #f3f4f6;
    font-size: 18px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .wfx-details-design.wfx-invoice-payments-tab .details-payment-fields {
        grid-template-columns: minmax(0, 1fr);
    }
    .wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields {
        grid-template-columns: minmax(0, 1fr) 44px;
    }
    .wfx-details-design.wfx-payment-stages-dialog .details-payment-stage-fields > div:first-child {
        grid-column: 1 / -1;
    }
    .wfx-details-design.wfx-financial-totals .details-financial-totals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wfx-details-design.wfx-customer-sales.customer-sales-page .customer-sales-actions {
        padding-left: 12px;
        padding-right: 12px;
    }
    .wfx-details-design.wfx-measurements-dialog .details-measurement-row {
        grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr);
    }
    .wfx-details-design.wfx-measurements-dialog .details-measurement-actions {
        grid-column: 1 / -1;
    }
    .wfx-details-design.wfx-logo-generation-dialog .wfx-logo-palette .circle-palette .e-row {
        gap: 1px;
    }
    .wfx-details-design.wfx-ready-invoice-dialog .details-ready-invoice-amount {
        flex: 1 1 100%;
        margin-left: 24px;
        text-align: left;
    }
    .wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row,
    .wfx-details-design.wfx-document-bundle-dialog .details-bundle-totals {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row > div:last-child {
        grid-column: 2;
    }
    .wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content > .row {
        grid-template-columns: 100px minmax(0, 1fr);
    }
    .wfx-details-design.wfx-document-bundle-dialog .details-document-bundle-item > .e-list-wrapper-part > .e-list-content > .row > div:first-child {
        grid-column: 1 / -1;
    }
    .wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-item-header > .row > div:last-child {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .wfx-details-design.wfx-inventory-bundle-dialog .details-bundle-item > .e-list-wrapper-part > .e-list-content > .row > div {
        flex: 0 0 100%;
        width: 100%;
    }
    .wfx-details-design { padding: 8px; }
    .wfx-details-design .details-panel { padding: 12px; }
    .wfx-details-design .details-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .wfx-details-design.wfx-details-dialog { padding: 0; }
    .wfx-details-design.wfx-details-dialog .details-dialog-content { padding: 0; }
    .wfx-details-design .details-dialog-table-scroll { max-height: none; }
    /* Retain the existing labelled history cards on phones, with a single
       vertical scroll owner and the same panel palette as other dialogs. */
    .wfx-details-design.wfx-document-history-dialog .details-dialog-table tbody tr {
        border-color: var(--details-border);
        background: var(--details-surface);
    }
    .wfx-details-design.wfx-document-history-dialog .details-dialog-table td {
        padding: 0;
        border-bottom: 0;
    }
}