.pageDom {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
}

.basePage {
    flex: 1;
    flex-grow: 1;
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: auto;
    background-color: var(--cust-background) !important;
}

.caption-text {
    font-size: 18px;
    font-weight: 400;
}

.highlight-text {
    font-size: 14px !important;
    font-weight: 700 !important;
}

@font-face {
    font-family: 'PlusJakartaSans';
    src: url('./fonts/PlusJakartaSansRegular.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/PlusJakartaSansRegular.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/PlusJakartaSansRegular.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/PlusJakartaSansRegular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/PlusJakartaSansRegular.ttf') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PlusJakartaSans';
    src: url('./fonts/PlusJakartaSansBold.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/PlusJakartaSansBold.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/PlusJakartaSansBold.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/PlusJakartaSansBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/PlusJakartaSansBold.ttf') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VigorDtExtraBold';
    src: url('./fonts/VigorDtExtraBold.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/VigorDtExtraBold.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/VigorDtExtraBold.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/VigorDtExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/VigorDtExtraBold.ttf') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
}

h1, h2, h3 {
    font-family: VigorDtExtraBold !important;
}

.radzenSecondaryOutline {
    border-color: var(--rz-secondary-lighter) !important;
}

    .radzenSecondaryOutline .mud-button-filled {
        background-color: white !important;
        color: var(--rz-secondary-light) !important;
    }

    .radzenSecondaryOutline .mud-button-outlined {
        background-color: white !important;
        color: var(--rz-secondary-light) !important;
    }

.takeOffChildRow td {
    background-color: var(--rz-base) !important;
}

.takeOffHighlight td {
    background: color-mix(in srgb, var(--rz-warning-light) 20%, transparent);
}

.filled-icon {
    font-variation-settings: 'FILL' 1;
}

/*
.rz-panel-menu .rz-navigation-item-icon {
    font-variation-settings: 'FILL' 1;
}
*/

.rz-datepicker.rz-color-warning-dark .rz-inputtext {
    color: var(--rz-warning-dark) !important;
}

.rz-tooltip-content {
    max-width: 280px;
    height: auto;
    white-space: pre-wrap;
}

.rz-button-md, .rz-button-sm {
    text-transform: none !important;
}

.highlight-match {
    background-color: var(--rz-info-lighter);
    font-weight: bold;
}

.rz-dropdown-panel, .rz-popup {
    max-width: 90% !important;
}

    .rz-dropdown-panel.rz-popup.rz-open {
        display: flex !important;
        flex-direction: column !important;
        min-height: 10px !important;
    }

.rz-lookup-panel {
    padding: 0.2rem !important;
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

#popup-takeoffItemSelector {
    min-width: 800px !important;
}

#popup-takeoffUomSelector {
    min-width: 300px !important;
}

#popup-customerSelector {
    min-width: 850px !important;
}

.row-disabled {
    pointer-events: none;
}

[data-tooltip]:hover::after {
    background-color: var(--rz-base-800);
    color: var(--rz-text-contrast-color);
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    padding: .25em;
    white-space: pre-line;
    text-align: left;
}

.table-cell-wrap .rz-cell-data {
    overflow: visible !important;
    white-space: normal !important;
}

.table-title-wrap .rz-column-title-content {
    white-space: normal !important;
    word-wrap: break-word !important;
}

.shortDateField {
    min-width: 130px;
}

.fileUploader {
    left: 0;
    --rz-upload-button-bar-background-color: transparent;
    --rz-upload-button-bar-padding: 0;
}

    .fileUploader .rz-fileupload-buttonbar .rz-fileupload-choose {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 100px 0;
    }

.rz-timeline {
    height: 30px;
}

.rz-timeline-item {
    padding: 0.2rem !important;
}

.tinyRadzenTimelineItem .rz-timeline-item {
    width: 30px !important;
}

.timelineCell {
    height: 60px !important;
    user-select: none;
}

    .timelineCell .rz-timeline-item {
        max-width: 2rem;
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .timelineCell .rz-timeline-point {
        font-weight: 600;
        box-shadow: none !important;
    }

    .timelineCell .rz-timeline-point-light {
        color: var(--rz-white);
        background-color: var(--rz-base-300);
    }

    .timelineCell .rz-timeline-point-primary {
        background-color: var(--rz-info-darker);
    }

    /* The current-status caption is centered under its bubble; at the timeline's ends a long caption
       (e.g. "Unprocessed") overflowed the fixed-width grid cell and was clipped on the left/right
       ("nprocessed"). Anchor the first bubble's caption to the left and the last bubble's to the right so
       it grows inward instead of past the cell edge — the bubble itself stays centered. Applies to every
       OrderStatusTimeLine (Construct + Connect overviews, detail header, mobile cards). */
    .timelineCell .rz-timeline-item:first-child .rz-timeline-content-end {
        align-self: flex-start;
    }

    .timelineCell .rz-timeline-item:last-child .rz-timeline-content-end {
        align-self: flex-end;
    }

.rz-timeline-point {
    user-select: none;
}
.communication-timeline-toolbar {
    width: 100%;
}

.communication-timeline-actions {
    margin-inline-start: auto;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    max-width: 100%;
}

    .communication-timeline-actions > * {
        max-width: 100%;
    }

.communication-timeline-toolbar-content {
    width: 100%;
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.case-post-inline-panel {
    width: min(100%, 28rem);
    padding: 1rem;
    border-radius: 0.75rem;
}

.rz-variant-text.rz-state-disabled input {
    color: var(--rz-input-value-color) !important;
}

.rz-variant-text.rz-state-disabled .rz-inputtext {
    color: var(--rz-input-value-color) !important;
}

.rz-variant-text.rz-state-disabled .rz-dropdown-trigger-icon {
    visibility: hidden !important;
}

.rz-variant-text.rz-state-disabled .rzi-calendar {
    visibility: hidden !important;
}

.rz-header {
    height: var(--app-header-height) !important;
}

.rz-data-grid {
    border-radius: 12px !important;
}

.pageContent {
    min-height: calc(100dvh - var(--app-header-height) * 3);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 10px !important;
}

    /* --- WorkOrderCardPage specific scrolling adjustments --- */
    /* Constrain the card to a fixed height and prevent global page overflow */
    .pageContent.pageContentLocked {
        height: calc(100dvh - 325px);
        min-height: 250px;
        overflow: hidden; /* hide global scroll inside card */
    }

        /* Make the first level stack inside the pageContent a flex column filling the card */
        .pageContent.pageContentLocked > .rz-stack {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0; /* allow splitter to shrink and enable internal scrolling */
        }

            /* Ensure any splitter directly inside that stack grows and can host scrollable panes */
            .pageContent.pageContentLocked > .rz-stack > .rz-splitter,
            .pageContent.pageContentLocked > .rz-stack > * > .rz-splitter { /* fallback for vertical wrapper splitter */
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
            }

        /* Allow nested splitter (the one with filePane, orderDataPane, validationsPane) to fill available height */
        .pageContent.pageContentLocked .rz-splitter .rz-splitter {
            height: 100%;
            min-height: 0;
        }

        /* Give every inner splitter pane its own scrollbar */
        .pageContent.pageContentLocked .rz-splitter-pane {
            overflow: auto; /* independent vertical scroll */
            overscroll-behavior: contain; /* avoid bounce chaining to page */
        }

            /* Prevent Radzen stacks inside panes from forcing extra growth */
            .pageContent.pageContentLocked .rz-splitter-pane > .rz-stack {
                min-height: 0;
            }

        /* Optional: smoother scrolling */
        .pageContent.pageContentLocked .rz-splitter-pane {
            scroll-behavior: smooth;
        }

/* Tasks header toolbar (desktop): the middle pane is narrow, so on a single nowrap row the Expand-mode
   toggle gets squeezed until its labels are clipped mid-letter. Let the toolbar wrap (the order-status
   dropdown drops below the toggle when space is tight) and keep each toggle label on one line, so the
   toggle group takes the room it needs and "Expand Active" / "Expand All" / "Collapse All" render whole. */
@media (min-width: 769px) {
    .tx-tasks-toolbar {
        flex-wrap: wrap !important; /* RadzenStack renders flex-wrap:nowrap inline */
        row-gap: 0.5rem;
    }

        .tx-tasks-expand .mud-toggle-item {
            white-space: nowrap;
        }
}

/* Construct Details on phones: the 3-pane splitter shows one pane at a time (chosen by the section
   tabs); collapse the other two and hide the drag/expand handles so the active pane fills the width. */
@media (max-width: 768px) {
    .tx-mobile-pane-tabs {
        margin-bottom: 0.25rem;
    }

        .tx-mobile-pane-tabs .mud-toggle-item {
            flex: 1 1 0;
        }

    .tx-mobile-panes .rz-splitter-bar {
        display: none !important;
    }

    /* Hide the two collapsed panes outright (Radzen only shrinks flex-basis, which the stacked
       block layout ignores), and let the active pane fill the width. */
    .tx-mobile-panes .rz-splitter-pane-collapsed {
        display: none !important;
    }

    .tx-mobile-panes .rz-splitter-pane:not(.rz-splitter-pane-collapsed) {
        display: block !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Tasks header toolbar: the Expand-mode toggle and the order-status dropdown can't sit side by side
       on a phone-width pane without clipping the toggle labels. Let the row wrap so the toggle group
       takes the full width (its three items sharing space equally) and the dropdown drops below it. */
    .tx-mobile-panes .tx-tasks-toolbar {
        flex-wrap: wrap !important; /* RadzenStack renders flex-wrap:nowrap inline */
        gap: 0.5rem;
    }

        .tx-mobile-panes .tx-tasks-toolbar .tx-tasks-expand {
            flex: 1 1 100%;
        }

            .tx-mobile-panes .tx-tasks-toolbar .tx-tasks-expand .mud-toggle-item {
                flex: 1 1 0;
            }
}

.mud-button-label {
    text-transform: none;
}

.rz-timeline {
    justify-content: flex-start !important;
}

    .rz-timeline .rz-timeline-item-content {
        align-items: flex-start !important;
        width: 100% !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    .rz-timeline .rz-timeline-item {
        width: 100% !important;
        margin-left: 0 !important;
    }

.stretchSelectBar {
    background: #e8e8e8;
    border-radius: 1rem !important;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
}

    /* Base buttons */
    .stretchSelectBar .rz-button {
        border: none !important;
        border-radius: 1rem !important;
        background: transparent !important;
        color: #333 !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        transition: all 0.15s ease-in-out;
        flex: 1;
        justify-content: center;
        align-items: center;
        gap: 8px;
        display: flex;
        padding: 10px 16px;
        box-shadow: none !important;
    }

        /* Hover */
        .stretchSelectBar .rz-button:hover {
            background: rgba(255, 255, 255, 0.35) !important;
        }

        /* Active item */
        .stretchSelectBar .rz-button.rz-state-active {
            background: #ffffff !important;
            color: #000 !important;
            font-weight: 600 !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
        }

    /* Badges */
    .stretchSelectBar .rz-badge {
        background: #e53935 !important;
        color: #ffffff !important;
        border-radius: 9999px !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        padding: 2px 6px !important;
        margin-left: 4px !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Icons */
    .stretchSelectBar .material-icons {
        font-size: 20px !important;
        color: inherit !important;
    }

    /* Focus cleanup */
    .stretchSelectBar .rz-button:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.rz-button {
    border-radius: 0.5rem !important;
}

.rz-button-text {
    letter-spacing: 0px;
}

.login-caption {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.1rem;
    text-align: left;
}

.rz-card {
    border-radius: 8px !important;
}

.rz-dialog {
    border-radius: 8px !important;
    min-height: 120px !important;
}

.login-card-no-border .rz-dialog,
.login-card-no-border .rz-dialog-content {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.login-card-no-border .rz-card:not(.login-card) {
    border: none !important;
    box-shadow: none !important;
    background-color: white;
}

.content-card {
    width: 100%;
    border-radius: 1rem;
    height: auto;
    display: block;
}

.text-tertiary-color {
    color: var(--rz-text-tertiary-color) !important;
}

.datalist-nopadding .rz-datalist-data {
    padding: 0;
}

    .datalist-nopadding .rz-datalist-data > li {
        padding: 0;
        border-width: 0;
    }

.fieldset-nopadding, .rz-fieldset {
    border-width: 0 !important;
}

    .fieldset-nopadding .rz-fieldset-legend {
        margin: 2px !important;
        text-align: right !important;
        width: 100% !important;
    }

.fieldset-nopadding, .rz-fieldset-legend > a {
    flex-direction: row-reverse;
    width: 100% !important;
}

.fieldset-row-bg {
    background: #f6f6f6;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
}

.fieldset-row-tasks .rz-fieldset-legend {
    padding: 0px !important;
    margin: 0px !important;
    background-color: var(--cust-background) !important;
    padding: 0.5rem !important;
}

.fieldset-row-tasks.fieldset-row-expanded .rz-fieldset-legend {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.fieldset-row-tasks.fieldset-row-collapsed .rz-fieldset-legend {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.fieldset-row-tasks .rz-expander.rz-state-expanded.rz-fieldset-content-wrapper {
    background-color: var(--cust-background-light) !important;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.expanded-section {
    background: var(--fui-bg3);
    border-radius: 12px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: none;
}

.no-border > .rz-form-field-content::after {
    border: 0 !important;
}

/* Read-only fields (ReadOnlyField: text variant + no-border): Radzen 11's textbox carries a size class
   (rz-input-md) whose padding reads --rz-input-padding-inline-md, which the text variant doesn't zero —
   so values sat 15px right of their labels. WASM (Radzen 8) renders them flush under the label. */
.no-border.rz-variant-text .rz-form-field-content {
    --rz-input-padding-inline-md: 0;
}

/* Connect detail header Work Order ID: suffixed numbers ("SQU0096654.1DELIVERY") overflow the default
   ~11rem field. A little wider fits the common ones without crowding the other header values; anything
   longer ends in an ellipsis (full value in the field's hover title) rather than being clipped mid-glyph. */
.tx-wo-id-field {
    width: 14rem;
}

    .tx-wo-id-field input {
        width: 100%;
        text-overflow: ellipsis;
    }

.dark-legend.rz-state-disabled .rz-form-field-content::after {
    border: 0 !important;
}

.dark-legend.rz-fieldset,
.dark-legend.rz-fieldset .rz-fieldset-content-wrapper,
.dark-legend.rz-fieldset .rz-expander-content,
.dark-legend.rz-fieldset .rz-fieldset-content {
    overflow: visible;
}

.dark-legend.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label {
    color: var(--rz-text-color) !important;
    font-weight: bold;
}

ul[role=tablist] {
    flex-wrap: wrap;
}

.tabview-nopadding {
    border: 0px !important;
    padding: 0px !important;
}

    .tabview-nopadding > a {
        padding: 2px !important;
    }

.tabview-top-hidden .rz-tabview-nav {
    display: none;
}

.tabview-top-hidden .rz-tabview-panels {
    border: 0 !important;
}

.tabview-top-hidden .rz-tabview-panel {
    padding: 0;
}

.min70px {
    min-width: 70px !important;
}

.min150px {
    min-height: 150px !important;
}

.min-w-220px {
    min-width: 220px !important;
}

.min-w-250px {
    min-width: 250px !important;
}

.mud-breadcrumb-item > a {
    color: var(--rz-secondary) !important;
    text-decoration: none;
}

.rz-form-field.text-warning {
    background-color: var(--rz-warning);
    border-radius: 5px;
}

.rz-form-field.text-danger {
    background-color: var(--rz-danger);
    border-radius: 5px;
}

.iframe-watermark {
    position: absolute;
    pointer-events: none;
    opacity: 0.2;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: none;
}

.rz-header, .rz-profile-menu {
    box-shadow: none !important;
}

.rz-profile-menu {
    background-color: var(--cust-background) !important;
}

.tinyImg {
    max-height: 50px;
    max-width: 50px;
    height: auto;
    width: auto;
}

.navigation-entry-image {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: contain;
    background-color: var(--fui-bg1);
}

.navigation-entry-svg {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: contain;
    background-color: var(--fui-bg1);
    display: grid;
    place-items: center;
}

.navigation-svg {
    width: 2rem;
    height: 2rem;
}

.navigation-entry-stack {
    --navigation-entry-stack-size: 7rem;
    min-width: var(--navigation-entry-stack-size);
    min-height: calc(var(--navigation-entry-stack-size) + 0.25rem);
    max-width: var(--navigation-entry-stack-size);
}

.marketing-headline {
    color: var(--fui-bg1) !important;
    font-size: 1.5rem !important;
}

.file-upload-input {
    position: absolute;
    width: 100%;
    min-height: 180px;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
}

.mud-file-upload {
    width: 100%;
}

.rz-text-bold {
    font-weight: bold !important;
}

.case-status-row {
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.case-status-icon {
    font-size: 1.3rem;
}

    .case-status-icon.finished {
        color: var(--rz-success);
    }

    .case-status-icon.notused {
        color: #bdbdbd;
    }

    .case-status-icon.default {
        color: #555;
    }

.case-status-text {
    margin-left: 0.5rem;
    font-weight: 500;
    font-size: 1rem;
}

    .case-status-text.notused {
        text-decoration: line-through;
        color: #bdbdbd;
    }

.datagrid-td-padding td {
    padding: 0px !important;
    padding-left: 0px !important;
}

    .datagrid-td-padding td input,
    .datagrid-td-padding td .rz-dropdown,
    .datagrid-td-padding td .rz-numeric {
        border: none !important;
        border-radius: 0px !important;
    }

.rz-inputtext[disabled] {
    padding: 0 !important;
}

.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover {
    color: var(--rz-secondary-light);
}


#myMap {
    width: 99%;
    height: 90vh;
}

.custom-marker {
    position: relative;
    cursor: pointer;
}

.tooltip {
    display: none;
    position: absolute;
    bottom: 30px;
    left: -48px;
    width: 120px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1000;
}

.custom-marker:hover .tooltip {
    display: block;
}

.rz-card.rz-variant-filled {
    box-shadow: none !important;
    background-color: var(--fui-bg3);
}

.custom-draganddrop td {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.splithidden .rz-splitbutton-menubutton {
    display: none !important;
}

.splithidden .rz-button-box {
    flex-direction: row-reverse;
}

/* Radzen 11 flags the first SplitButton menu item as highlighted the moment the popup
   opens, painting the "selected" background the older WASM (Radzen 8) build never showed.
   Suppress that pre-highlight so the menu opens with nothing selected; :hover still
   highlights normally. Scoped to split-button menus so dropdown/autocomplete selected-item
   highlighting is untouched. */
.rz-splitbutton-menu .rz-menuitem.rz-state-highlight:not(:hover),
.rz-splitbutton-menu .rz-menuitem.rz-state-highlight:not(:hover) .rz-menuitem-link,
.rz-splitbutton-menu .rz-menuitem.rz-state-highlight:not(:hover) .rz-menuitem-text {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

textarea {
    resize: none !important;
}

.whitebackground {
    background-color: #FFFFFF !important;
}

.uppercase .rz-textbox,
.uppercase.rz-textbox {
    text-transform: uppercase !important;
}

.rz-secondary-light .rz-chkbox-box.rz-state-active {
    background-color: var(--rz-secondary-light) !important;
    border-color: var(--rz-secondary-light) !important;
}

.view-entry {
    width: 117px;
    height: auto;
}

.view-selected {
    border-width: 1px;
    border-radius: 8px;
}

.group-header.rz-state-disabled {
    pointer-events: none !important;
}

    .group-header.rz-state-disabled > a.rz-tabs-link:hover {
        background: #f1f1f1 !important;
    }

.powerbi-tabs .rz-tabview-panel {
    width: 100%;
    height: 100%;
}

.powerbi-pageContent {
    height: calc(100dvh - 200px);
}

.transparent-datatable,
.transparent-datatable th,
.transparent-datatable td {
    background-color: transparent !important;
    border-width: 0px !important;
}

.round-orange-icon {
    width: 24px !important;
    height: 24px !important;
    background-color: #ff6600;
    border-radius: 50%;
    color: white;
    font-size: 16px !important;
}

.user-icon {
    background-color: var(--rz-secondary-light);
    color: white;
}

.warning-icon {
    color: var(--rz-warning);
    flex-shrink: 0;
}

.rz-text-body1.contrast-color {
    color: var(--rz-text-contrast-color);
}

.transparent-badge {
    color: var(--rz-info-darker) !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    border: none !important;
}

.rz-disabled-color {
    color: var(--rz-input-disabled-color) !important;
}

.rz-dropdown.none {
    border-color: var(--tx-red) !important;
}

.rz-dropdown.warning {
    background-color: var(--tx-yellow) !important;
}

.rz-dropdown.success {
    background-color: var(--tx-green) !important;
}

.rz-dropdown.danger {
    background-color: var(--tx-orange) !important;
}

.rz-dropdown.info {
    background-color: var(--tx-blue) !important;
}

.rz-dropdown.blank {
    background-color: var(--tx-gray) !important;
}

.production-status-cell.warning {
    background-color: var(--tx-yellow) !important;
}

.production-status-cell.success {
    background-color: var(--tx-green) !important;
}

.production-status-cell.danger {
    background-color: var(--tx-orange) !important;
}

.production-status-cell.info {
    background-color: var(--tx-blue) !important;
}

.production-status-cell.blank {
    background-color: var(--tx-gray) !important;
}

.production-status-cell > .rz-cell-data {
    background-color: transparent !important;
}

.dirtyOutline {
    box-shadow: inset 5px 0 0 0 #EE772F !important;
}

/* Quick Edit inline editors are transparent so cells read as plain text (WASM parity — the WASM grid
   shows values, not white input boxes). This also lets the dirty-cell strip (the inset box-shadow above)
   show through without pushing the value right, so a modified cell keeps its value aligned with the rest
   of the column instead of being nudged over by a left pad. */
.datagrid-td-padding td.editActive .rz-textbox,
.datagrid-td-padding td.editActive .rz-numeric,
.datagrid-td-padding td.editActive .rz-numeric input,
.datagrid-td-padding td.editActive .rz-dropdown,
.datagrid-td-padding td.editActive .rz-datepicker input {
    background-color: transparent !important;
}

/* Kill the focus ring Radzen draws on the Quick-Edit grid's inline editors. In this Radzen version the
   ring is a 1px inset box-shadow; the fixed-height cell clips its top and bottom, so clicking a cell
   leaves just the left and right edges — reading as two black vertical lines. Inline cells already signal
   focus through the cell (and the dirty strip), so the editor ring isn't needed here — matching the WASM
   grid, whose inline editors show no ring. Scoped to the grid so focus rings in dialogs/forms are intact. */
.datagrid-td-padding td .rz-textbox,
.datagrid-td-padding td .rz-numeric,
.datagrid-td-padding td .rz-dropdown,
.datagrid-td-padding td .rz-datepicker,
.datagrid-td-padding td .rz-numeric input,
.datagrid-td-padding td .rz-textbox input,
.datagrid-td-padding td .rz-datepicker input,
.datagrid-td-padding td input {
    box-shadow: none !important;
}

.fixed-height-table.datagrid-td-padding .rz-grid-table tbody > tr > td {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    vertical-align: middle;
}

    .fixed-height-table.datagrid-td-padding .rz-grid-table tbody > tr > td > .rz-cell-data {
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        padding-top: 0px;
        padding-bottom: 0px;
        /* Horizontal cell padding for the Quick Edit grid (WASM parity), applied to the content wrapper
           so it's uniform across every cell — display, editor, and the frozen first column alike — since
           padding the <td> alone didn't reach the first (frozen/highlight) columns. */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.datagrid-td-padding .editNotActive {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.btn-apply-changes.rz-button {
    background-color: var(--rz-secondary-light) !important;
    border-color: var(--rz-secondary-light) !important;
}

/* Loading veil over the stage-gates (Tasks) pane while the active gate is saving or advancing — covers
   the gate list + form so the user sees a spinner until the switch/save settles. */
.tx-tasks-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--rz-base-background-color, #fff) 65%, transparent);
    border-radius: inherit;
}

/* Full-page busy veil shown while a Construct-detail Action (revise/pause/reschedule/cancel/resume, the
   remaining-amount save, or a stage-gate switch) is in flight — the page-level analog of the Quick-Edit
   grid's loading overlay, so the whole page reads as busy until the action completes (WASM RadzenLoader
   parity). Kept below Radzen dialogs/toasts (which sit ~1100+) since actions only run once dialogs close. */
.tx-page-loading {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--rz-base-background-color, #fff) 55%, transparent);
}

/* Staged attachment row on a stage-gate task (WASM FileUpload file chip): a full-width surface with the
   file name and a delete affordance. */
.tx-attachment-row {
    background-color: var(--rz-base-200);
    border-radius: 6px;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    min-width: 0; /* allow the file name to truncate instead of overflowing the row */
}

.required-warning.rz-form-field .rz-form-field-label::after,
.required-warning.rz-fieldset .rz-fieldset-legend::after {
    content: " *";
    color: var(--rz-danger);
    font-weight: bold;
}

.validation-warning-icon {
    color: var(--rz-danger) !important;
    font-size: 0.75rem !important;
    flex-shrink: 0;
}

.validation-summary-icon {
    font-size: 1rem !important;
}

.validation-warning-text {
    font-size: 0.75rem !important;
    color: var(--rz-danger) !important;
}

.validation-summary-box.rz-card {
    border: 1.5px solid var(--rz-danger) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.validation-summary-title {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--rz-text-color) !important;
}

.validation-summary-subtitle {
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

.login-screen-shell {
    padding: 1.5rem 1rem 1rem;
    background:
        radial-gradient(circle, rgba(217, 45, 42, 0.07), rgba(0, 0, 0, 0) 70%),
        radial-gradient(120% 110% at 50% 0%, rgb(255, 255, 255) 0%, rgb(246, 244, 240) 60%, rgb(236, 231, 223) 100%);
    font-size: 15px;
    /* The statically-rendered account pages use plain HTML controls rather than Radzen components, so they
       don't pick up Radzen's PlusJakartaSans (and form controls never inherit a font by default). Set it
       here so they match the WASM login/reset screens. */
    font-family: 'PlusJakartaSans', sans-serif;
}

    .login-screen-shell input,
    .login-screen-shell button {
        font-family: inherit;
    }

    /* WASM's texts sit in RadzenStacks, where Radzen's `.rz-stack > .rz-text-body1` zeroes their margins
       (the stack gap does the spacing); the static pages' plain flex containers need the same. */
    .login-screen-shell p.rz-text-body1 {
        margin-block: 0;
    }

    .login-screen-shell .login-card {
        width: 100%;
        max-width: 424px;
        min-width: 0;
        padding: 2.75rem 2.75rem 2.5rem;
        border-radius: 18px !important;
        border: 1px solid #ece8e1 !important;
        background: #ffffff !important;
        box-shadow: 0 18px 50px rgba(120, 24, 21, 0.10) !important;
        position: relative;
        overflow: visible;
    }

    .login-screen-shell .login-logo {
        width: 120px;
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px;
    }

    .login-screen-shell .login-heading {
        color: #2b2a28;
        font-family: 'VigorDtExtraBold', 'PlusJakartaSans', sans-serif;
        font-weight: 700 !important;
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-top: 0.5rem;
    }

    .login-screen-shell .login-subtitle {
        color: #6b6760;
        font-size: 0.95rem;
        text-align: center;
    }

    .login-screen-shell .login-card .rz-form-field-label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }

    .login-screen-shell .login-card .rz-form-field-content,
    .login-screen-shell .login-card .rz-form-field-start,
    .login-screen-shell .login-card .rz-form-field-end {
        min-height: 52px;
    }

    .login-screen-shell .login-card .rz-inputtext,
    .login-screen-shell .login-card .rz-password input {
        height: 52px;
        font-size: 0.95rem !important;
        line-height: 1.2;
    }

        .login-screen-shell .login-card .rz-inputtext::placeholder,
        .login-screen-shell .login-card .rz-password input::placeholder {
            font-size: 0.9rem !important;
        }

    .login-screen-shell .login-card .rz-checkbox,
    .login-screen-shell .login-card .rz-checkbox-box,
    .login-screen-shell .login-card .rz-chkbox,
    .login-screen-shell .login-card .rz-chkbox-box {
        width: 20px;
        height: 20px;
    }

        .login-screen-shell .login-card .rz-chkbox-box.rz-state-active {
            background-color: #d93a33 !important;
            border-color: #d93a33 !important;
        }

    .login-screen-shell .login-card .rz-chkbox-icon {
        color: #ffffff !important;
    }

    .login-screen-shell .login-keep-signed {
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .login-screen-shell .login-forgot-link,
    .login-screen-shell .login-forgot-link .rz-link {
        color: #d43b34 !important;
        font-weight: 600 !important;
        text-decoration: none;
        font-size: 0.85rem;
    }

        .login-screen-shell .login-forgot-link:hover,
        .login-screen-shell .login-forgot-link:hover .rz-link {
            color: #bb2f29 !important;
            text-decoration: underline;
        }

    .login-screen-shell .login-primary-btn,
    .login-screen-shell .login-microsoft-btn {
        min-height: 50px;
    }

    .login-screen-shell .login-card .rz-button,
    .login-screen-shell .login-card .custom-radzen-button,
    .login-screen-shell .login-card button {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }

    .login-screen-shell .login-contact-text {
        color: #9a958c;
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        margin-top: 0.85rem;
    }

    .login-screen-shell .login-footer-text {
        color: #8a847f;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.03em;
    }

@media (max-width: 640px) {
    .login-screen-shell {
        padding: 1rem 0.75rem 0.75rem;
    }

        .login-screen-shell .login-card {
            min-width: 0;
            max-width: 100%;
            padding: 2.6rem 1.25rem 1.25rem;
        }

        .login-screen-shell .login-logo {
            width: 108px;
        }

        .login-screen-shell .login-heading {
            font-size: 1.65rem !important;
        }

        .login-screen-shell .login-subtitle {
            font-size: 0.9rem;
        }
}

.login-card-no-border .rz-dialog-titlebar {
    padding: 0px !important;
}

.sidebar-menu i.rzi {
    font-size: 20px !important;
}

.sidebar-menu img {
    width: 20px !important;
    height: 20px !important;
}

.sidebar-header {
    border-inline-end: 1px solid var(--rz-base-300);
    padding: 11px 11px !important;
}

.rz-sidebar {
    border-inline-end: 1px solid var(--rz-base-300) !important;
}

.app-header {
    padding: 0 24px !important;
}

    .app-header.rz-h-100 {
        height: 60px !important;
    }

.page-title-row {
    padding-top: 24px;
    padding-bottom: 26px;
}

    .page-title-row.rz-text-h3 {
        color: var(--rz-secondary-light) !important;
    }

.bottom-border-no-radius {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.upper-border-no-radius {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.color-swatch-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    border: 2px solid transparent;
    outline: none;
    outline-offset: 2px;
    transition: outline 0.15s ease;
}

    .color-swatch-btn.selected {
        border: 3px solid transparent;
    }

.network-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .network-avatar .rz-text {
        color: #fff;
        font-weight: 600;
        margin: 0;
    }

.avatar-initials {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}

.location-badge {
    border-radius: 0 !important;
    padding: 3px 8px !important;
    line-height: 1;
    display: flex;
    align-items: center;
}

.permission-badge {
    border-radius: 0 !important;
    padding: 3px 8px !important;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: black !important;
}

.scrollable-list {
    border: 1px solid var(--rz-secondary-lighter);
    border-radius: var(--rz-border-radius);
    overflow-y: auto;
    max-height: 400px;
}

.list-item-check-selected {
    font-size: 22px;
    color: var(--rz-danger);
    flex-shrink: 0;
}

.list-item-check-unselected {
    font-size: 22px;
    color: var(--rz-border-color);
    flex-shrink: 0;
}

.scrollable-list-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-secondary-lighter);
    border-radius: 0; /* IMPORTANT */
    margin: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.scrollable-list-item-selected {
    background-color: var(--rz-base-200);
}

.scrollable-list-item-unselected {
    background-color: white;
}

.search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px !important;
}

.network-logo-preview {
    background-color: var(--rz-secondary-light);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.NotificationsDialog.rz-dialog-side {
    width: 380px !important;
    max-width: 380px !important;
}

.notifications-search-row .notifications-search-input.rz-textbox {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
}

.notifications-search-row .notifications-search-input.rz-textbox:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.owner-transfer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.owner-transfer-avatar-current {
    background-color: var(--rz-danger-lighter);
    color: var(--rz-danger-dark);
}

.owner-transfer-avatar-new {
    background-color: var(--rz-info-lighter);
    color: var(--rz-info-dark);
    border: 1px solid var(--rz-info);
}

.owner-transfer-initials {
    font-weight: 600;
    font-size: 0.875rem;
}

.mud-breadcrumb-separator {
    color: var(--rz-secondary) ! important;
}

.quote-aging-banner {
    background-color: #fdecea !important;
    border: 1px solid #f5c6c2;
}

.quote-aging-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rz-border-radius, 6px);
}

    .quote-aging-icon .rzi {
        font-size: 2rem;
    }

.quote-selection-bar {
    background-color: var(--rz-base-100, #f4f5f7) !important;
    border: 1px solid var(--rz-base-300, #dfe1e6);
}

    .quote-selection-bar .quote-clear-button {
        color: var(--rz-text-color, #2b2b2b) !important;
    }

        .quote-selection-bar .quote-clear-button:hover,
        .quote-selection-bar .quote-clear-button:focus,
        .quote-selection-bar .quote-clear-button:active {
            background-color: var(--rz-base-300, #dfe1e6) !important;
            color: var(--rz-text-color, #2b2b2b) !important;
            text-decoration: underline;
        }

.quote-select-cell {
    overflow: visible;
}

/* Summary-tab 2-column field grid (WASM grid-stack-2col). */
.quote-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
}

@media (max-width: 640px) {
    .quote-summary-grid {
        grid-template-columns: 1fr;
    }
}

.reachout-log-empty {
    padding: 2.5rem 1rem;
}
/* Overview grid mounted but its column visibility not applied yet: keep it laid out (so Radzen can
   measure) but invisible and out of the flow while the skeleton shows. */
.tx-grid-pending {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
/* Circular customer initials avatar in list grids (matches the WASM order grids). */
.tx-grid-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-300, #e7e5e4);
    color: var(--rz-text-color, #44403c);
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1;
    text-transform: uppercase;
}

/* Connect Attachments tab — clickable file cards (WASM AttachmentPaneGroup parity). */
.attachment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 150px;
    padding: 0.75rem;
    border: 1px solid var(--rz-border, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    background: var(--rz-base-background-color, #fff);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.attachment-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border-color: var(--rz-primary, #c00);
}
.attachment-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--fui-bg3, #f5f5f5);
}
.attachment-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Construct overview collapsible sections (WASM EditConstructPage overview pane). */
.tx-overview-section { background: #fff; border-radius: 8px; }
.tx-overview-section .rz-fieldset-content { padding-top: 0.5rem; }

/* WASM parity: the legacy Radzen used by the WASM app rendered the collapsible
   fieldset legend as a `row-reverse` anchor (collapse toggler on the RIGHT,
   header text left-aligned). The newer Radzen used by the server renders a
   centered `row` <button> (toggler on the LEFT, text centered). Flip it back
   for the Construct Overview sections and stage-gate task rows so the headers
   read "Title —" with left-aligned content, exactly like the WASM. */
.tx-overview-section > .rz-fieldset-legend { text-align: start; }
.tx-overview-section > .rz-fieldset-legend > button,
.tx-overview-section > .rz-fieldset-legend > a {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: start;
}

.fieldset-row-tasks > .rz-fieldset-legend > button,
.fieldset-row-tasks > .rz-fieldset-legend > a,
.tx-attach-folder > .rz-fieldset-legend > button,
.tx-attach-folder > .rz-fieldset-legend > a {
    flex-direction: row-reverse;
    justify-content: flex-start;
    width: 100%;
    text-align: start;
}

/* Denser summary layout (WASM parity). The newer Radzen defaults each input to
   ~206px, which forced one field per row; the WASM packs two side-by-side. Let
   each field flex to roughly half the row and shrink its input so two columns
   form (collapsing to one on a very narrow pane), overriding the fixed
   min-w-220px/250px widths inside the overview only. */
.tx-overview-section .rz-form-field {
    flex: 1 1 150px !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 100% !important;
}
.tx-overview-section .rz-form-field .rz-textbox,
.tx-overview-section .rz-form-field .rz-dropdown,
.tx-overview-section .rz-form-field .rz-datepicker,
.tx-overview-section .rz-form-field .rz-numeric {
    width: 100% !important;
    min-width: 0 !important;
}
/* Value lines up flush under its caption — WASM inputs carry no left padding,
   the newer Radzen ones add ~15px which offsets the value from the label. Applies to the
   Overview summary fields and the header fact strip (Stage Gate | Time at Gate | Last Note | pins). */
.tx-overview-section .rz-form-field .rz-textbox,
.tx-overview-section .rz-form-field .rz-numeric input,
.tx-overview-section .rz-form-field .rz-datepicker input,
.tx-overview-section .rz-form-field .rz-dropdown,
.tx-fact-strip .rz-form-field .rz-textbox,
.tx-fact-strip .rz-form-field .rz-numeric input,
.tx-fact-strip .rz-form-field .rz-datepicker input,
.tx-fact-strip .rz-form-field .rz-dropdown {
    padding-left: 0 !important;
}

/* Timeline entries: title (far left, truncates with …) … datetime (right) … +/- toggler (far right).
   Radzen 11 renders the legend's toggler + header inside a <button> (it was an <a> in Radzen 8), so the
   global `.rz-fieldset-legend > a` row-reverse never applied here and the toggler defaulted to the left.
   Lay the button out explicitly: header grows and truncates, toggler pinned last. */
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > button,
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100% !important;
}
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > button > *:not(.rz-fieldset-toggler),
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > a > *:not(.rz-fieldset-toggler) {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > button > .rz-fieldset-toggler,
.fui-timeline .fieldset-nopadding .rz-fieldset-legend > a > .rz-fieldset-toggler {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: 0.5rem;
}
/* Let the title shrink below its content width so rz-text-truncate can add the ellipsis. */
.fui-timeline .fieldset-nopadding .rz-fieldset-legend .rz-text-truncate {
    min-width: 0;
}

/* Collapsible fieldset with the +/- toggler pinned to the right of the title — Related tab
   category headers (Related Work Orders / Order History), matching the timeline entries. */
.tx-collapse-right .rz-fieldset-legend > button,
.tx-collapse-right .rz-fieldset-legend > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100% !important;
}
.tx-collapse-right .rz-fieldset-legend > button > *:not(.rz-fieldset-toggler),
.tx-collapse-right .rz-fieldset-legend > a > *:not(.rz-fieldset-toggler) {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.tx-collapse-right .rz-fieldset-legend > button > .rz-fieldset-toggler,
.tx-collapse-right .rz-fieldset-legend > a > .rz-fieldset-toggler {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: 0.5rem;
}

.cursor-pointer { cursor: pointer; }

/* Related-tab order tile: an anchor (opens the order in a new tab) laid out like the old card. */
.tx-related-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tx-related-tile:hover {
    background-color: var(--rz-base-100);
    border-radius: 0.5rem;
}
/* "Select Order" dialog row (WASM SelectOrderDialog outlined button) — an anchor opening the order in a new tab. */
.tx-select-order-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    border: 1px solid var(--rz-base-400);
    border-radius: var(--rz-border-radius, 4px);
    color: var(--rz-text-color);
    text-decoration: none;
    cursor: pointer;
}
.tx-select-order-row:hover { background-color: var(--rz-base-100); }

/* ===== Notifications side dialog (WASM NotificationsDialog parity) ===== */
.notifications-dialog-shell { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }
.notifications-header-block { padding: 15px 16px 12px; border-bottom: 1px solid #ececec; display: flex; flex-direction: column; gap: 12px; }
.notifications-title-row { gap: 8px; }
.notifications-title { color: #2f2f2f; font-size: 16px; font-weight: 700; }
.notifications-count-badge { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 1px 7px; }
.notifications-spacer { flex: 1; }
.notifications-close-button.rz-button { width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 8px; }
.notifications-bulk-actions .rz-button { min-height: 32px; }
.notifications-search-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rz-base-300); border-radius: 8px; }
.notifications-search-icon { color: #8f8f8f; font-size: 16px; }
.notifications-search-input { flex: 1; }
.notifications-search-input.rz-textbox { border: none; box-shadow: none; background: transparent; padding: 0; height: 100%; min-width: 0; color: #2f2f2f; font-size: 12.5px; }
.notifications-search-input.rz-textbox:focus { box-shadow: none; }
.notifications-clear-search-button.rz-button { width: 26px; min-width: 26px; height: 26px; padding: 0; border-radius: 999px; }
.notifications-list { flex: 1; overflow-y: auto; }
.notifications-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 16px 11px 13px; border-bottom: 1px solid #f4f4f4; cursor: pointer; }
.notifications-row:hover { background: #fafafa !important; }
.notifications-type-icon { margin-top: 2px; font-size: 16px; }
.notifications-row-body { flex: 1; min-width: 0; }
.notifications-row-top { display: flex; align-items: baseline; gap: 8px; }
.notifications-row-title { color: #1f1f1f; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifications-row-time { margin-left: auto; color: #9a9999; font-size: 11px; white-space: nowrap; }
.notifications-row-message { margin-top: 2px; color: #5c5b5b; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifications-row-reference { margin-top: 3px; color: #9a9999; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifications-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.notifications-row-icon-button.rz-button { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 999px; }
.notifications-empty-state { padding: 80px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.notifications-empty-icon { font-size: 22px; color: #9a9999; }
.notifications-empty-title { color: #5c5b5b; font-size: 15px; font-weight: 700; }
.notifications-empty-text { max-width: 220px; color: #9a9999; font-size: 12px; line-height: 1.5; }

/* Aging unconverted-quotes banner on the Home dashboard (T7711). */
.quote-aging-banner {
    background-color: #fdecea !important;
    border: 1px solid #f5c6c2;
}
.quote-aging-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rz-border-radius, 6px);
}
    .quote-aging-icon .rzi {
        font-size: 2rem;
    }
.aging-bar {
    height: 10px;
}
    .aging-bar-segment {
        height: 100%;
        min-width: 4px;
    }
        .aging-bar-segment:first-child {
            border-top-left-radius: 9999px;
            border-bottom-left-radius: 9999px;
        }
        .aging-bar-segment:last-child {
            border-top-right-radius: 9999px;
            border-bottom-right-radius: 9999px;
        }
.aging-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Missing-documents dialog (quote pre-validation, T7903). */
.missing-documents-list-card {
    background-color: var(--rz-base-100, #f9fafb);
    border: 1px solid var(--rz-border, #e5e7eb);
    padding: 0.9rem 1rem;
}
.missing-documents-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

/* ===================================================================
   AG-UI Construct assistant — floating FAB + right-hand chat panel
   (ported from the servicelead AiChatDock). Only mounts on a Construct
   Details page; MudBlazor components inside are theme-aware.
   =================================================================== */
.tx-ai-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1250;
}

.tx-ai-panel {
    position: fixed;
    top: var(--app-header-height, 56px);
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    z-index: 1250;
}

.tx-ai-panel-header {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.tx-ai-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
}

.tx-ai-panel-body > * {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 600px) {
    .tx-ai-panel { width: 100vw; }
}

/* When the panel is open on a wide screen, shift the page left (make room for the 420px panel)
   instead of overlaying it. On mobile the panel is full-width, so no shift. */
.main-body-container.tx-ai-open {
    transition: padding-right .2s ease;
}

@media (min-width: 601px) {
    .main-body-container.tx-ai-open {
        padding-right: 420px;
    }
}