/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ixllurku4p] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ixllurku4p] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5tlck5nvpx],
.components-reconnect-repeated-attempt-visible[b-5tlck5nvpx],
.components-reconnect-failed-visible[b-5tlck5nvpx],
.components-pause-visible[b-5tlck5nvpx],
.components-resume-failed-visible[b-5tlck5nvpx],
.components-rejoining-animation[b-5tlck5nvpx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-retrying[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-failed[b-5tlck5nvpx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5tlck5nvpx] {
    display: block;
}


#components-reconnect-modal[b-5tlck5nvpx] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5tlck5nvpx 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5tlck5nvpx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5tlck5nvpx 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5tlck5nvpx]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5tlck5nvpx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5tlck5nvpx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5tlck5nvpx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5tlck5nvpx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5tlck5nvpx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5tlck5nvpx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5tlck5nvpx] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5tlck5nvpx] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5tlck5nvpx] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-5tlck5nvpx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5tlck5nvpx] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5tlck5nvpx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5tlck5nvpx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5tlck5nvpx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TabStrip.razor.rz.scp.css */
.tab-strip[b-kzdcn4h33f] {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    user-select: none;
}

.tab-strip-scroller[b-kzdcn4h33f] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    gap: 4px;
    padding: 6px 12px 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tab-strip-scroller[b-kzdcn4h33f]::-webkit-scrollbar {
    height: 4px;
}

.tab-strip-scroller[b-kzdcn4h33f]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 2px;
}

.tab-strip-tab[b-kzdcn4h33f] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 220px;
    height: 52px;
    padding: 6px 8px 6px 12px;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: none;
    cursor: pointer;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    transition: background-color 100ms ease, color 100ms ease, transform 100ms ease;
    position: relative;
    overflow: hidden;
}

.tab-strip-tab:hover[b-kzdcn4h33f] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.tab-strip-tab-active[b-kzdcn4h33f] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    margin-bottom: -1px;
    box-shadow: 0 -1px 0 var(--mud-palette-surface);
}

.tab-strip-tab-active[b-kzdcn4h33f]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mud-palette-primary);
    border-radius: 10px 10px 0 0;
}

.tab-strip-tab-icon[b-kzdcn4h33f] {
    flex: 0 0 auto;
    margin-right: 8px;
    color: var(--mud-palette-text-secondary);
}

.tab-strip-tab-active .tab-strip-tab-icon[b-kzdcn4h33f] {
    color: var(--mud-palette-primary);
}

.tab-strip-tab-content[b-kzdcn4h33f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.tab-strip-tab-title[b-kzdcn4h33f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-strip-tab-active .tab-strip-tab-title[b-kzdcn4h33f] {
    font-weight: 600;
}

.tab-strip-tab-label[b-kzdcn4h33f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.tab-strip-tab-subtitle[b-kzdcn4h33f] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.tab-strip-tab-active .tab-strip-tab-subtitle[b-kzdcn4h33f] {
    color: var(--mud-palette-text-secondary);
}

.tab-strip-close[b-kzdcn4h33f] {
    flex: 0 0 auto;
    margin-left: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    transition: opacity 100ms ease, background-color 100ms ease;
}

.tab-strip-tab:hover .tab-strip-close[b-kzdcn4h33f],
.tab-strip-tab-active .tab-strip-close[b-kzdcn4h33f] {
    opacity: 1;
}

.tab-strip-close:hover[b-kzdcn4h33f] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.tab-strip-dirty-dot[b-kzdcn4h33f] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    box-shadow: 0 0 0 2px var(--mud-palette-background);
}

.tab-strip-tab-active .tab-strip-dirty-dot[b-kzdcn4h33f] {
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.tab-strip-tab-dragging[b-kzdcn4h33f] {
    opacity: 0.5;
}

/* While any tab is being dragged, suppress pointer events on all descendants so dragover always
   fires on the outer .tab-strip-tab — letting OffsetX be measured against the full 220px tab
   body. Child combinator (> *) would miss grandchildren (MudIcon SVG, label spans), and
   exempting .tab-strip-close would route events to its ~24px box and break the left/right-half
   placement at the right edge of every tab. The close button can't usefully accept clicks mid-
   drag anyway, so blanket suppression is correct. */
.tab-strip-drag-in-progress *[b-kzdcn4h33f] {
    pointer-events: none;
}

.tab-strip-drop-indicator[b-kzdcn4h33f] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 2px;
    margin: 6px 0 0 0;
    background: var(--mud-palette-primary);
    border-radius: 1px;
    pointer-events: none;
}

/* Bug 245 — "all open tabs" overflow control. The button and click-away overlay render inline in
   this component, so they're styled here (scoped). The dropdown popover is teleported to the page
   root via MudPopoverProvider, so its content is styled globally in wwwroot/app.css
   (.tab-strip-overflow-popover and its children). */
.tab-strip-overflow[b-kzdcn4h33f] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 6px 8px 0 4px;
}

.tab-strip-overflow-btn[b-kzdcn4h33f] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}

.tab-strip-overflow-btn:hover[b-kzdcn4h33f],
.tab-strip-overflow-btn-open[b-kzdcn4h33f] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.tab-strip-overflow-count[b-kzdcn4h33f] {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 14px;
    text-align: center;
}

/* Sits just below --mud-palette-popover z-index (--mud-zindex-popover = 1200) and above page
   content, so a click outside the popover closes it. Same idiom as StatusBadgeSelect.razor. */
.tab-strip-overflow-overlay[b-kzdcn4h33f] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

@media (max-width: 768px) {
    .tab-strip[b-kzdcn4h33f] {
        display: none;
    }
}
/* /Components/Pages/DirectLicensing/TicketReplyComposer.razor.rz.scp.css */
.tc-composer[b-oeouolylys] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px;
    background: var(--mud-palette-surface);
}

/* Internal-note tint mirrors Zendesk's yellow internal-note affordance so the agent can't
   mistake an internal note for a customer-facing reply. */
.tc-composer.tc-internal .tc-editor[b-oeouolylys] {
    background: #fff8e1;
}

.tc-toolbar[b-oeouolylys] {
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 2px 4px;
}

/* PBI 164.2 — closed ticket: grey the editor + toolbar so it reads as locked. Buttons disable
   themselves; this greys the contenteditable box (which has no disabled state of its own) and
   blocks stray interaction with it. The notice + disabled controls carry the "why". */
.tc-composer.tc-readonly .tc-editor[b-oeouolylys],
.tc-composer.tc-readonly .tc-toolbar[b-oeouolylys] {
    background: var(--mud-palette-action-disabled-background);
    opacity: 0.7;
}

.tc-composer.tc-readonly .tc-editor[b-oeouolylys] {
    cursor: not-allowed;
}

.tc-editor[b-oeouolylys] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 6px 6px;
    min-height: 90px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 10px;
    outline: none;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}

.tc-editor:focus[b-oeouolylys] {
    border-color: var(--mud-palette-primary);
}

/* Placeholder for the empty contenteditable — attr() reads data-placeholder off the div. */
.tc-editor:empty[b-oeouolylys]::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-disabled);
    pointer-events: none;
}

.tc-emoji-grid[b-oeouolylys] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 4px;
    max-width: 240px;
}

.tc-emoji-glyph[b-oeouolylys] {
    font-size: 1.1rem;
    line-height: 1;
}
/* /Components/Pages/DirectLicensing/TicketWorkspaceView.razor.rz.scp.css */
/* Fixed viewport-relative height so the three panes scroll independently (Zendesk-style) instead
   of the whole page growing. The offset is the chrome above this component:
   64px MudAppBar + ~59px TabStrip (52px tab + 6px scroller pad + 1px border) + 16px wrapper pt-4
   + 24px wrapper pb-6 = 163px. If the app bar / tab strip height changes, update this. On narrow
   viewports (below) the layout falls back to natural page scroll. */
.tw-root[b-o1ztn54lic] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 163px);
    min-height: 0;
}

.tw-header[b-o1ztn54lic] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.tw-title-wrap[b-o1ztn54lic] {
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
}

.tw-title[b-o1ztn54lic] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In-place refresh indicator — a thin bar under the header while a soft refresh runs (after a
   reply submit). Fixed height so it never steals height from the three-pane body below it. */
.tw-refresh-bar[b-o1ztn54lic] {
    flex: 0 0 auto;
}

.tw-center-message[b-o1ztn54lic] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Three-pane body. Panes scroll independently; the whole row fills the remaining height. */
.tw-body[b-o1ztn54lic] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.tw-pane[b-o1ztn54lic] {
    padding: 12px;
    min-width: 0;
    overflow-y: auto;
    /* Hard stop: never scroll horizontally. overflow-y:auto alone makes the browser compute
       overflow-x to auto (visible+auto is illegal), which produced a horizontal scrollbar as
       soon as a long value/tag exceeded the pane. Long content wraps (below) instead. */
    overflow-x: hidden;
}

.tw-pane-left[b-o1ztn54lic] {
    flex: 0 0 26%;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.tw-pane-right[b-o1ztn54lic] {
    flex: 0 0 26%;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Center pane holds the scrolling thread + the pinned composer, so it manages its own
   vertical layout and does NOT scroll as a whole (the thread scrolls instead). */
.tw-pane-center[b-o1ztn54lic] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

/* The scrolling conversation. Subtle grey inset so the white comment cards read as distinct
   messages (issue: cards were the same color as the pane). */
.tw-thread[b-o1ztn54lic] {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px;
}

.tw-card[b-o1ztn54lic] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* Fields stack label-above-value so long labels (CreationSourceURL, UserNameStringEmployee, …)
   can't overlap their value the way a fixed-width label column did. */
.tw-field[b-o1ztn54lic] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-field-label[b-o1ztn54lic] {
    line-height: 1.2;
}

.tw-field-value[b-o1ztn54lic] {
    min-width: 0;
    /* overflow-wrap:anywhere breaks even an unbroken token (a long URL, a slug) so it can never
       push the field wider than the pane. word-break is the older-engine fallback. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* URL-valued fields wrap to fit the column (multi-line is fine, and fully readable) rather than
   a single nowrap line that overflowed the pane and forced a horizontal scrollbar. */
.tw-field-link[b-o1ztn54lic] {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tw-tags[b-o1ztn54lic] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Outlined chip-like pill rendered as a plain span (not MudChip) so we fully control clipping:
   a tag too long for the column ellipsizes and shows its full text on hover, instead of the
   MudChip label overflowing and overlapping neighbors. */
.tw-tag[b-o1ztn54lic] {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    height: 20px;
    line-height: 18px;
    padding: 0 8px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.tw-tags-toggle[b-o1ztn54lic] {
    margin-top: 2px;
    text-transform: none;
    font-size: 0.72rem;
}

/* Public replies are white cards on the grey thread so each message stands out. */
.tw-comment[b-o1ztn54lic] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tw-comment:last-child[b-o1ztn54lic] {
    margin-bottom: 0;
}

/* Internal notes are staff coordination — tint them apart from customer-facing replies. */
.tw-comment.tw-internal[b-o1ztn54lic] {
    background: #fff8e1;
    border-color: #f0d58a;
}

/* Avatar-left, content-right message layout (Zendesk-style). */
.tw-comment-row[b-o1ztn54lic] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tw-comment-main[b-o1ztn54lic] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Initials disc standing in for a profile photo. */
.tw-avatar[b-o1ztn54lic] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* Staff: filled brand blue, white initials. */
.tw-avatar-agent[b-o1ztn54lic] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* End user: inverted — white disc, blue initials + brand ring. */
.tw-avatar-customer[b-o1ztn54lic] {
    background: #fff;
    color: var(--mud-palette-primary);
    border: 2px solid var(--mud-palette-primary);
}

.tw-comment-head[b-o1ztn54lic] {
    margin-bottom: 4px;
}

.tw-comment-body[b-o1ztn54lic] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* PBI 164.2 — comment rendered from sanitized html_body. Block elements handle spacing, so drop
   pre-wrap (which would double up the HTML's own whitespace). ::deep is required because the
   sanitized markup is injected via MarkupString and does NOT receive this component's CSS-isolation
   scope attribute — a plain `.tw-html p` selector would never match it. */
.tw-comment-body.tw-html[b-o1ztn54lic] {
    white-space: normal;
}

/* PBI 164.3 — give paragraphs a real TOP margin (browser/Gmail default is ~1em), not just a
   bottom one. Zendesk wraps an agent's signature in <div class="signature"><p>…</p></div> and
   leans on that <p>'s top margin for the blank line between the message and the signature. We
   strip the class for safety, so without a top margin here the signature butted directly against
   the last body line. Adjacent paragraphs collapse to a single 0.75em gap, so body spacing stays
   tight. */
.tw-comment-body.tw-html[b-o1ztn54lic]  p {
    margin: 0.75em 0;
}

/* NB: no p:first-child reset — Zendesk's signature <p> is the first (only) child of its wrapper
   <div>, so zeroing first-child top margins would kill the very gap this fixes. A leading <p> at
   the top of a comment just gets a harmless 0.75em of lead-in space (comments open with text, not
   a <p>, so this is rare). */
.tw-comment-body.tw-html[b-o1ztn54lic]  p:last-child {
    margin-bottom: 0;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  ul,
.tw-comment-body.tw-html[b-o1ztn54lic]  ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  img {
    max-width: 100%;
    height: auto;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  a {
    color: #1976d2;
    text-decoration: underline;
    word-break: break-all;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  blockquote {
    margin: 0 0 8px;
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.tw-comment-body.tw-html[b-o1ztn54lic]  pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.04);
    padding: 6px 8px;
    border-radius: 4px;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  code {
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  table {
    border-collapse: collapse;
    max-width: 100%;
}

.tw-comment-body.tw-html[b-o1ztn54lic]  td,
.tw-comment-body.tw-html[b-o1ztn54lic]  th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 4px 8px;
}

/* Stack the panes on narrow viewports so nothing is clipped (AC-friendly graceful degrade).
   The fixed viewport height + independent-scroll model is desktop-only; below this, fall back
   to natural page scroll so the panes aren't crammed into a short fixed box. */
@media (max-width: 960px) {
    .tw-root[b-o1ztn54lic] {
        height: auto;
    }

    .tw-body[b-o1ztn54lic] {
        flex-direction: column;
        overflow-y: auto;
    }

    .tw-pane-left[b-o1ztn54lic],
    .tw-pane-right[b-o1ztn54lic] {
        flex: 0 0 auto;
        border: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .tw-pane-center[b-o1ztn54lic] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 420px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* UI/UX review (chore/2026-07-16): scoped styles for the Home hub. All colours come from MudBlazor
   palette CSS variables so the page follows the light/dark toggle automatically. */

.home-hero-title[b-9g4pfp6o81] {
    font-weight: 700;
}

.home-hero-subtitle[b-9g4pfp6o81] {
    color: var(--mud-palette-text-secondary);
    max-width: 62ch;
}

/* Auto-fill grid: cards flow into as many columns as the viewport allows and collapse to one on
   narrow screens — no manual breakpoints needed. */
.home-grid[b-9g4pfp6o81] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.home-card[b-9g4pfp6o81] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.home-card:hover[b-9g4pfp6o81] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.home-card:focus-visible[b-9g4pfp6o81] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.home-card-icon[b-9g4pfp6o81] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    /* Fallback for engines without color-mix; the tinted version wins where supported. */
    background: rgba(62, 176, 213, 0.12);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.home-card-body[b-9g4pfp6o81] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-card-title[b-9g4pfp6o81] {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}

.home-card-desc[b-9g4pfp6o81] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

/* Wrapper span (not the MudIcon itself) so the icon inherits currentColor and this scoped rule can
   drive it — scoped-CSS attributes aren't applied to child-component roots. */
.home-card-arrow[b-9g4pfp6o81] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--mud-palette-text-disabled);
    transition: transform 120ms ease, color 120ms ease;
}

.home-card:hover .home-card-arrow[b-9g4pfp6o81] {
    color: var(--mud-palette-primary);
    transform: translateX(3px);
}
/* /Components/Pages/Sales/CustomerDetail.razor.rz.scp.css */
/* Customer detail page layout. Full-height flex column so the PAGE never scrolls — each section pane
   scrolls on its own (no nested page + section scrollbars). Offset = the chrome above this component:
   64px MudAppBar + ~59px TabStrip (52px tab + 6px scroller pad + 1px border) + 16px wrapper pt-4 +
   24px wrapper pb-6 = 163px (same value as TicketWorkspaceView.razor.css — update both if the app
   bar / tab strip height changes). Below 960px the fixed-height/independent-scroll model is dropped
   in favour of natural page scroll so nothing is crammed into a short box. */
.cd-root[b-cexsg4m73f] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 163px);
    min-height: 0;
    overflow: hidden;
}

.cd-header[b-cexsg4m73f] {
    flex: 0 0 auto;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Three-column body; the columns fill the height under the banner and never scroll as a whole. */
.cd-body[b-cexsg4m73f] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
    gap: 16px;
    padding-top: 12px;
}

/* A column is a vertical flex stack of panes. Ratios 3:5:4 mirror the old MudGrid xs=3/5/4. */
.cd-col[b-cexsg4m73f] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    gap: 12px;
}

.cd-col-left[b-cexsg4m73f] { flex: 3 1 0; }
.cd-col-center[b-cexsg4m73f] { flex: 5 1 0; }
.cd-col-right[b-cexsg4m73f] { flex: 4 1 0; }

/* A scrolling section pane: vertical scroll only. overflow-y:auto alone makes the browser compute
   overflow-x to auto, which showed a phantom horizontal scrollbar whenever content exceeded the
   pane width — pin it hidden (matches the .tw-pane rule). */
.cd-pane[b-cexsg4m73f] {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.cd-pane-fill[b-cexsg4m73f] { flex: 1 1 auto; }
.cd-pane-42[b-cexsg4m73f] { flex: 1 1 42%; }
.cd-pane-58[b-cexsg4m73f] { flex: 1 1 58%; }
.cd-pane-50[b-cexsg4m73f] { flex: 1 1 50%; }
.cd-pane-natural[b-cexsg4m73f] { flex: 0 0 auto; }

/* Panes are plain <div>s (not MudPaper) so the scoped scroll rules above actually apply — Blazor's
   CSS-isolation attribute is not added to MudBlazor component roots, which silently dropped the
   overflow rules when these were MudPaper. Restyle them as the Outlined cards they replace. */
.cd-pane[b-cexsg4m73f],
.cd-pane-natural[b-cexsg4m73f] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-sizing: border-box;
}

.cd-section-body[b-cexsg4m73f] {
    padding: 8px 16px 16px;
}

/* Frozen section header inside a scrolling pane; surface background so content passes underneath it
   rather than through it. */
.cd-sticky-header[b-cexsg4m73f] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Narrow viewports: drop the fixed-height, independent-scroll model and let the page scroll,
   stacking the columns so nothing is crammed into a short fixed box. */
@media (max-width: 960px) {
    .cd-root[b-cexsg4m73f] {
        height: auto;
        overflow: visible;
    }

    .cd-body[b-cexsg4m73f] {
        flex-direction: column;
        overflow: visible;
    }

    .cd-col[b-cexsg4m73f] {
        flex: 0 0 auto;
    }

    .cd-pane[b-cexsg4m73f],
    .cd-pane-fill[b-cexsg4m73f],
    .cd-pane-42[b-cexsg4m73f],
    .cd-pane-58[b-cexsg4m73f],
    .cd-pane-50[b-cexsg4m73f] {
        flex: 0 0 auto;
        overflow: visible;
    }
}
/* /Components/Shared/SortableLookupTable.razor.rz.scp.css */
.sortable-lookup-table[b-29d5iuf636] {
    width: 100%;
    user-select: none;
}

.sortable-lookup-grid[b-29d5iuf636] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.875rem;
}

/* The ::deep combinator is required because the consumer renders <th> / <td> elements
   via the Headers and RowTemplate RenderFragments. Blazor's scoped CSS only marks
   elements that this component renders directly, so without ::deep the th/td styling
   falls back to browser defaults (centered headers, no padding, etc.). */
.sortable-lookup-grid[b-29d5iuf636]  thead th {
    text-align: left;
    padding: 8px 10px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-weight: 500;
}

.sortable-lookup-grid[b-29d5iuf636]  tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
    background: var(--mud-palette-surface);
}

.sortable-lookup-grid[b-29d5iuf636]  tbody tr:last-child td {
    border-bottom: none;
}

.sortable-lookup-row:hover[b-29d5iuf636]  td {
    background: var(--mud-palette-action-default-hover);
}

.sortable-lookup-handle-col[b-29d5iuf636],
.sortable-lookup-handle-cell[b-29d5iuf636] {
    width: 32px;
    padding: 0 4px;
    text-align: center;
}

.sortable-lookup-handle[b-29d5iuf636] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    padding: 4px;
    border-radius: 4px;
}

.sortable-lookup-handle:hover[b-29d5iuf636] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Active drag: switch the cursor on the handle itself (only the handle is draggable
   in this component, unlike TabStrip where the whole tab is). */
.sortable-lookup-table.is-dragging .sortable-lookup-handle[b-29d5iuf636] {
    cursor: grabbing;
}

.sortable-lookup-handle.is-disabled[b-29d5iuf636] {
    cursor: not-allowed;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
}

.sortable-lookup-handle.is-disabled:hover[b-29d5iuf636] {
    background: transparent;
    color: var(--mud-palette-text-disabled);
}

/* The row currently being dragged is dimmed so the user tracks where it will land
   rather than where it's leaving from. ::deep so the opacity reaches consumer cells. */
.sortable-lookup-row.is-row-dragging[b-29d5iuf636]  td {
    opacity: 0.4;
}

/* Drop indicator: a 2px primary-color rule along the top/bottom edge of the row where
   the dragged item will land. Using inset box-shadow avoids the cross-browser position:
   relative-on-tr quirk and keeps the row from shifting layout when the indicator
   appears. ::deep so the shadow paints on consumer-owned cells too. */
.sortable-lookup-row.drop-above[b-29d5iuf636]  td {
    box-shadow: inset 0 2px 0 0 var(--mud-palette-primary);
}

.sortable-lookup-row.drop-below[b-29d5iuf636]  td {
    box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary);
}