@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* /Components/Components/Accounting/InvoiceProcessingList.razor.rz.scp.css */
[b-4eg37sdy7y] .mud-table-container {
    min-width: 100%;
}

[b-4eg37sdy7y] .mud-table-root {
    width: 100%;
}

[b-4eg37sdy7y] .inv-grid .mud-table-head .mud-table-cell {
    padding: 6px 8px;
    white-space: nowrap;
}
/* /Components/Components/AdminTesting/GuidedTours/GuidedToursAssignTab.razor.rz.scp.css */
/* Guided tours → Assign: small layout rules MudBlazor's props don't cover. */

/* The tour select. MudSelect 8.11 renders the chosen item's content inside the closed one-line field as well as in the open list.
   Each item carries a one-line label (the TourLabel text) and the two-line content: the field shows only the label, truncated; the
   list (rendered in the popover provider, outside .assign-tour-field) shows only the two lines. */
.tour-option-label[b-0fs1vqp2af] {
    display: none;
}

.tour-option-lines[b-0fs1vqp2af] {
    display: flex;
    flex-direction: column;
}

/* min-width: 0 lets the meta line ellipsize inside the option instead of widening it. */
.tour-option-lines[b-0fs1vqp2af] {
    min-width: 0;
}

/* "App · id vN" stays on one line (on a phone it used to break inside the id), ellipsized when the list is narrow. */
.tour-option-meta[b-0fs1vqp2af] {
    font-size: 0.75rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-tour-field[b-0fs1vqp2af]  .tour-option-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-tour-field[b-0fs1vqp2af]  .tour-option-lines {
    display: none;
}

/* The note's helper line is ONE paragraph holding a flex row: p.mud-input-helper-text > div.d-flex > div.me-auto (the helper text)
   + div.ms-auto (the "0 / 500" counter). The counter stays on one line; the helper text beside it wraps. (Targeting the paragraph
   itself made both nowrap and pushed the counter off a phone screen.) */
.assign-note[b-0fs1vqp2af]  .mud-input-helper-text .me-auto {
    min-width: 0;
    white-space: normal;
}

.assign-note[b-0fs1vqp2af]  .mud-input-helper-text .ms-auto {
    flex-shrink: 0;
    padding-inline-start: 8px;
    white-space: nowrap;
}

/* Side by side (lg+), the Assigned card keeps a floor so an empty list doesn't look collapsed; stacked, it's as tall as its content. */
@media (min-width: 1280px) {
    .assign-root[b-0fs1vqp2af]  .assigned-card {
        min-height: 320px;
    }
}

/* The assignee table: cells and headers never wrap and the table keeps a sensible width, so on a phone it scrolls sideways inside
   .assignees-scroll (overflow-x: auto) and the page never does. */
.assignees-scroll[b-0fs1vqp2af] {
    max-width: 100%;
    min-width: 0;
}

.assignees-scroll[b-0fs1vqp2af]  table {
    min-width: 560px;
}

.assignees-scroll[b-0fs1vqp2af]  th,
.assignees-scroll[b-0fs1vqp2af]  td {
    white-space: nowrap;
}
/* /Components/Components/AiChat/AttachmentChip.razor.rz.scp.css */
/* Wingmate attachment chip. MudIcon / MudIconButton roots keep MudBlazor's own scope, so anything styling them goes
   through ::deep or inline Style; the spans below are this component's own and scope normally. */

.wm-chip[b-fnry5370oa] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 320px;
    min-width: 0;
    height: 28px;
    padding: 0 4px 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.wm-chip:hover[b-fnry5370oa] {
    background: var(--mud-palette-action-default-hover);
}

/* The tooltip wrapper (MudTooltip's root div) sits between the group and the body button: let it shrink so the name
   can truncate. */
.wm-chip[b-fnry5370oa]  .wm-chip-tooltip-root {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* The clickable body: a native <button> (Enter / Space for free) stripped of its own chrome — the chip draws it. */
.wm-chip-body[b-fnry5370oa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    text-align: left;
    cursor: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.wm-chip-body:focus-visible[b-fnry5370oa] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Where :has is supported, ring the whole chip instead of just the body. */
@supports selector(:has(*)) {
    .wm-chip-body:focus-visible[b-fnry5370oa] {
        outline: none;
    }

    .wm-chip:has(.wm-chip-body:focus-visible)[b-fnry5370oa] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 1px;
    }
}

.wm-chip-trailing[b-fnry5370oa] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

/* "Request access" — the source said 403 / 404 for this viewer. */
.wm-chip-request[b-fnry5370oa] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px 1px 4px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-error);
    text-decoration: none;
    white-space: nowrap;
}

.wm-chip-request:hover[b-fnry5370oa],
.wm-chip-request:focus-visible[b-fnry5370oa] {
    background: var(--mud-palette-error-hover, rgba(244, 67, 54, 0.08));
    text-decoration: underline;
}

.wm-chip--emphasize[b-fnry5370oa] {
    border-color: var(--mud-palette-primary);
}

.wm-chip--suggested[b-fnry5370oa] {
    border-style: dashed;
    border-color: var(--mud-palette-primary);
    background: transparent;
}

.wm-chip--error[b-fnry5370oa] {
    border-color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover, rgba(244, 67, 54, 0.06));
}

/* Superseded copy of a source that was refreshed later in the conversation. */
.wm-chip--older[b-fnry5370oa] {
    opacity: 0.6;
}

.wm-chip--busy[b-fnry5370oa],
.wm-chip--disabled[b-fnry5370oa] {
    cursor: default;
}

.wm-chip--disabled[b-fnry5370oa] {
    opacity: 0.5;
}

/* ── File-type icon + cloud corner badge ── */
.wm-chip-icon[b-fnry5370oa] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.wm-chip-cloud[b-fnry5370oa] {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-info);
}

/* ── Middle-ellipsis name: the head truncates, the tail (end of stem + extension) never does ── */
.wm-chip-name[b-fnry5370oa] {
    display: inline-flex;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* white-space: pre (not nowrap) on BOTH halves: as separate flex items, nowrap would strip a space sitting at the split
   ("…v12 FINAL.xlsx" rendering as "…v12FINAL.xlsx"). File names carry no newlines, so pre never wraps. */
.wm-chip-name-head[b-fnry5370oa] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.wm-chip-name-tail[b-fnry5370oa] {
    flex-shrink: 0;
    white-space: pre;
}

.wm-chip-size[b-fnry5370oa] {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.wm-chip-badge[b-fnry5370oa] {
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    font-size: 0.6875rem;
}

.wm-chip-busy-text[b-fnry5370oa] {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* ── The single status slot ── */
.wm-chip-status[b-fnry5370oa] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px 1px 4px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.wm-chip-status--updated[b-fnry5370oa] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.1));
}

.wm-chip-status--noaccess[b-fnry5370oa],
.wm-chip-status--error[b-fnry5370oa] {
    color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover, rgba(244, 67, 54, 0.08));
}

.wm-chip-status--cui[b-fnry5370oa] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.1));
}

.wm-chip-status--saved[b-fnry5370oa] {
    color: var(--mud-palette-success-darken);
    background: var(--mud-palette-success-hover, rgba(76, 175, 80, 0.1));
}

/* Neutral on normal surfaces; inside the blue user bubble AiChat.razor.css switches it to the bubble's text colour. */
.wm-chip-status--oldercopy[b-fnry5370oa] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wm-chip-status-text[b-fnry5370oa] {
    white-space: nowrap;
}

.wm-chip--error .wm-chip-status-text[b-fnry5370oa] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Trailing more-actions: visible on hover / focus, always on mobile (layout kept so nothing shifts) ── */
.wm-chip-more[b-fnry5370oa],
.wm-chip-remove[b-fnry5370oa] {
    display: inline-flex;
    flex-shrink: 0;
}

.wm-chip-more[b-fnry5370oa] {
    opacity: 0;
    transition: opacity 120ms ease;
}

.wm-chip:hover .wm-chip-more[b-fnry5370oa],
.wm-chip:focus-within .wm-chip-more[b-fnry5370oa],
.wm-chip--mobile .wm-chip-more[b-fnry5370oa] {
    opacity: 1;
}

.wm-chip-more[b-fnry5370oa]  .mud-icon-button,
.wm-chip-remove[b-fnry5370oa]  .mud-icon-button {
    padding: 2px;
}

/* ── Tooltip body (rendered into the popover portal; these divs still carry this component's scope) ── */
.wm-chip-tooltip[b-fnry5370oa] {
    max-width: 360px;
    text-align: left;
    line-height: 1.35;
}

.wm-chip-tooltip-title[b-fnry5370oa] {
    font-weight: 600;
    word-break: break-word;
}

.wm-chip-tooltip-line[b-fnry5370oa] {
    opacity: 0.85;
    word-break: break-word;
}

.wm-chip-tooltip-error[b-fnry5370oa] {
    color: var(--mud-palette-error-lighten);
    opacity: 1;
}
/* /Components/Components/AiChat/AttachmentPreviewDialog.razor.rz.scp.css */
/* Full-screen host for the preview pane: the pane owns its own header, so the body just fills the dialog's content
   element (margin-free, non-scrolling flex column, see ContentStyle). Sized by the container, NOT 100vh/100dvh: a
   viewport-tall body plus MudBlazor's 8px content margins overflowed and showed a vertical scrollbar on phones.
   height:100% + flex:1 so it fills whether or not the content element is a flex container. */
.wm-preview-dialog-body[b-z5xp761jxd] {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* The preview pane or, in Files mode, the Files list — whichever is showing fills the body. */
.wm-preview-dialog-body[b-z5xp761jxd]  .wm-pane,
.wm-preview-dialog-body[b-z5xp761jxd]  .wm-files {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Components/AiChat/AttachmentPreviewPane.razor.rz.scp.css */
/* Wingmate attachment preview pane. Fills its host (the resizable column beside the chat, or the full-screen dialog). */

.wm-pane[b-sxe32s7ubo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
}

/* ── Header: title row + toolbar row (two rows so the 380 px minimum still fits every action) ── */
.wm-pane-head[b-sxe32s7ubo] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 4px 4px 2px 10px;
}

.wm-pane-titlebar[b-sxe32s7ubo],
.wm-pane-toolbar[b-sxe32s7ubo] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.wm-pane-toolbar[b-sxe32s7ubo] {
    min-height: 32px;
    flex-wrap: wrap;
}

.wm-pane-icon[b-sxe32s7ubo] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 6px;
}

.wm-pane-cloud[b-sxe32s7ubo] {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: inline-flex;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-info);
}

.wm-pane-title[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

.wm-pane-title:focus-visible[b-sxe32s7ubo] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.wm-pane-nav[b-sxe32s7ubo] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.wm-pane-position[b-sxe32s7ubo] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wm-pane-zoom[b-sxe32s7ubo] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding-left: 4px;
    border-left: 1px solid var(--mud-palette-divider);
}

.wm-pane-zoom[b-sxe32s7ubo]  .wm-pane-zoom-label {
    min-width: 52px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

.wm-pane[b-sxe32s7ubo]  .wm-pane-text-btn {
    text-transform: none;
}

/* ── Notes / body ── */
.wm-pane-note[b-sxe32s7ubo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wm-pane-body[b-sxe32s7ubo] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wm-pane-skeleton[b-sxe32s7ubo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
}

.wm-pane-pdf[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.wm-pane-image[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
}

/* The <img> BOX fills the pane and the picture is letterboxed inside it (scale-down: shrink to fit, never enlarge a small
   image). Panzoom's contain:'outside' needs the element to cover its parent at scale 1 — a box only as big as the
   picture made it zoom a wide image ~5× on open to fill a tall pane. */
.wm-pane-image img[b-sxe32s7ubo] {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.wm-pane-textwrap[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.wm-pane-text[b-sxe32s7ubo] {
    margin: 0;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Microsoft's Office embed is designed for a light page — a neutral light surface behind it, even in dark mode. */
.wm-pane-embed[b-sxe32s7ubo] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.wm-pane-embed iframe[b-sxe32s7ubo] {
    display: block;
    border: 0;
    background: #ffffff;
}

.wm-pane-embed-loading[b-sxe32s7ubo] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #555;
    background: #f5f5f5;
    font-size: 0.8125rem;
}

.wm-pane-slow[b-sxe32s7ubo] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.wm-pane-message[b-sxe32s7ubo] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.wm-pane-message-text[b-sxe32s7ubo] {
    max-width: 320px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.wm-pane-message-actions[b-sxe32s7ubo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.wm-pane-extracted[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wm-pane-extracted-head[b-sxe32s7ubo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.wm-pane-extracted-body[b-sxe32s7ubo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 12px;
}

/* ── Back to Files (opened from the Files list) ── */
.wm-pane-titlebar[b-sxe32s7ubo]  .wm-pane-back {
    margin-left: -6px;
    margin-right: 2px;
    flex-shrink: 0;
}

/* ── "Showing Wingmate's copy from …" over a mirror preview of an older snapshot ── */
.wm-pane-note--copy[b-sxe32s7ubo] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.1));
}

/* ── Loading past 3 s (the OneDrive preview copy is being made) ── */
.wm-pane-preparing[b-sxe32s7ubo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Extracted text standing in for a preview ── */
.wm-pane-fallback-banner[b-sxe32s7ubo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.wm-pane-fallback-banner-text[b-sxe32s7ubo] {
    flex: 1 1 200px;
    min-width: 0;
}

/* ── Mirror footer ── */
.wm-pane-footer[b-sxe32s7ubo] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Components/Components/AiChat/CodeInterpreterSteps.razor.rz.scp.css */
/* Python sandbox Code/Output blocks.

   Once a run has FINISHED these collapse behind one summary row styled to match the Activity button beside
   it — the two are answering the same question ("what did it do"), so they should look like siblings rather
   than two unrelated widgets. While a run is LIVE the panel is open and prominent instead, because watching
   the code get written is the feature.

   Deliberately quieter than the answer text: this is the model showing its working, so it should read as
   supporting evidence rather than compete with the prose above it. The code block itself stays dark in both
   themes to match the globally-loaded highlight.js github-dark syntax theme, exactly as fenced code in an
   answer does — a light code block would need a per-theme highlight stylesheet swap. */

.ci-steps[b-0qbk23m66m] {
    margin: 0.5rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ci-step[b-0qbk23m66m] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

    .ci-step.ci-step-failed[b-0qbk23m66m] {
        border-color: var(--mud-palette-warning);
    }

.ci-step-head[b-0qbk23m66m] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

    .ci-step-head:hover[b-0qbk23m66m] {
        background: var(--mud-palette-action-default-hover);
    }

.ci-step-icon[b-0qbk23m66m] {
    opacity: 0.7;
}

.ci-step-title[b-0qbk23m66m] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ci-step-turn[b-0qbk23m66m],
.ci-step-elapsed[b-0qbk23m66m] {
    opacity: 0.65;
    font-size: 0.72rem;
}

.ci-step-status[b-0qbk23m66m] {
    font-size: 0.72rem;
    margin-left: auto;
}

.ci-status-ok[b-0qbk23m66m] {
    color: var(--mud-palette-success);
}

.ci-status-failed[b-0qbk23m66m] {
    color: var(--mud-palette-warning);
}

.ci-step-spinner[b-0qbk23m66m] {
    margin-left: auto;
}

/* The code itself. The copy button is a real Blazor component overlaid on the block, rather than a div the
   markdown helper injects — that helper moves the <pre> into its own wrapper, which fights Blazor's diffing
   here and leaves orphaned wrappers behind. */
.ci-code-wrap[b-0qbk23m66m] {
    position: relative;
}

.ci-copy-btn[b-0qbk23m66m] {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ci-code-wrap:hover .ci-copy-btn[b-0qbk23m66m] {
    opacity: 1;
}

.ci-copy-btn:hover[b-0qbk23m66m] {
    color: #fff;
}

.ci-code[b-0qbk23m66m] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: #0d1117;
    color: #e6edf3;
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ci-output-label[b-0qbk23m66m] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

/* stdout: the same GitHub-dark family as the code above it, so code and what it printed read as one unit
   rather than a dark slab followed by an unrelated bright panel. Deliberately ONE step lighter (#161b22 is
   GitHub's "canvas subtle" beside the code's #0d1117) with slightly dimmer text, so source and result stay
   distinguishable at a glance. Hard-coded like the code block, so it matches in both app themes. The
   divider is GitHub-dark's own border colour — the page's light hairline would read as a seam between two
   dark slabs. */
.ci-stdout[b-0qbk23m66m] {
    background: #161b22;
    border-top: 1px solid #30363d;
    padding: 0.45rem 0.75rem 0.6rem;
}

.ci-stdout .ci-output-label[b-0qbk23m66m] {
    color: #8b949e;
    opacity: 1;
}

/* Charts, download chips and the supporting-files disclosure stay on the page surface — they are MudBlazor
   components styled for it, and a chart image reads better on the page than inside a terminal. */
.ci-artifacts[b-0qbk23m66m] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 0.45rem 0.75rem 0.6rem;
}

/* Directly below stdout the colour change is already the boundary; a light hairline there would be noise. */
.ci-stdout + .ci-artifacts[b-0qbk23m66m] {
    border-top: none;
}

/* stdout is data, not prose: monospace, wrapping (a long pandas row should not force a horizontal scroll on
   the whole transcript), and capped in height so a chatty script cannot push the answer off screen. */
.ci-logs[b-0qbk23m66m] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow-y: auto;
    color: #c9d1d9;
    background: transparent;
    scrollbar-color: #484f58 transparent;
}

.ci-no-output[b-0qbk23m66m] {
    font-size: 0.76rem;
    color: #8b949e;
    font-style: italic;
}

.ci-images[b-0qbk23m66m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.ci-files[b-0qbk23m66m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.ci-file-size[b-0qbk23m66m] {
    opacity: 0.6;
    font-size: 0.7rem;
}


/* ── Finished: one summary row, deliberately shaped like the Activity button ────────────────────────── */

.ci-summary[b-0qbk23m66m] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    border-radius: 4px;
    width: fit-content;
}

    .ci-summary:hover[b-0qbk23m66m] {
        background: var(--mud-palette-action-default-hover);
    }

.ci-summary-icon[b-0qbk23m66m] {
    opacity: 0.7;
}

.ci-summary-label[b-0qbk23m66m] {
    font-weight: 600;
}

.ci-summary-meta[b-0qbk23m66m] {
    opacity: 0.65;
    font-size: 0.72rem;
}

.ci-summary-warn[b-0qbk23m66m] {
    color: var(--mud-palette-warning);
}

/* Indented under the summary, mirroring how the Activity feed sits under its button. Both states carry the
   summary row now — finished as the disclosure, live as the minimise control — so both are indented under it. */
.ci-done .ci-panel[b-0qbk23m66m],
.ci-live .ci-panel[b-0qbk23m66m] {
    margin-left: 1.1rem;
    margin-top: 0.25rem;
}

/* Inside the panel the steps are ROWS, not cards: twelve bordered cards is mostly chrome. The panel carries
   the single border instead. */
.ci-done .ci-step[b-0qbk23m66m] {
    border: none;
    border-radius: 0;
    background: transparent;
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 0.4rem;
    margin-bottom: 0.15rem;
}

.ci-done .ci-step.ci-step-failed[b-0qbk23m66m] {
    border-left-color: var(--mud-palette-warning);
}

.ci-step-of[b-0qbk23m66m] {
    opacity: 0.5;
}

/* ── Supporting files (ingredients of a deliverable) ───────────────────────────────────────────────── */

.ci-intermediates[b-0qbk23m66m] {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.ci-intermediates-head[b-0qbk23m66m] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.72rem;
    opacity: 0.7;
}

    .ci-intermediates-head:hover[b-0qbk23m66m] {
        opacity: 1;
    }

.ci-intermediates-why[b-0qbk23m66m] {
    font-style: italic;
    opacity: 0.8;
}

/* ── Step-cap notice ──────────────────────────────────────────────────────────────────────────────── */

.ci-cap-notice[b-0qbk23m66m] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.74rem;
    border-radius: 6px;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning-hover);
    border: 1px solid var(--mud-palette-warning);
}

/* The output check's "fixing this file before handing it over" — informational, not a warning. */
.ci-cap-notice.ci-info-notice[b-0qbk23m66m] {
    /* info-text is the text colour FOR a solid info fill (near white); on this pale tint it vanished in light mode. */
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-info-hover);
    border-color: var(--mud-palette-info);
}

    .ci-cap-notice.ci-info-notice[b-0qbk23m66m]  .mud-icon-root {
        color: var(--mud-palette-info);
    }
/* /Components/Components/AiChat/ComposerAttachMenu.razor.rz.scp.css */
.composer-attach-anchor[b-u54ah2x3gf] {
    display: inline-flex;
    flex-shrink: 0;
}

/* Same circular footprint as the other composer buttons (the composer's own rule doesn't reach into this component). */
.composer-attach-anchor[b-u54ah2x3gf]  .composer-icon-btn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
}

.composer-attach-anchor[b-u54ah2x3gf]  .composer-icon-btn .mud-icon-root {
    font-size: 1.2rem;
}

/* Menu content is rendered into the popover provider; these elements still carry this component's scope. */
.composer-menu-header[b-u54ah2x3gf] {
    padding: 6px 16px 2px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.composer-menu-note[b-u54ah2x3gf] {
    padding: 4px 16px 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    max-width: 280px;
}

.composer-menu-file[b-u54ah2x3gf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    min-width: 0;
}

.composer-menu-file-name[b-u54ah2x3gf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Components/AiChat/ConversationFilesPanel.razor.rz.scp.css */
/* Wingmate Files panel. Fills its host (the resizable column beside the chat, or the full-screen preview dialog) exactly
   like the preview pane it stands in for. MudBlazor roots keep their own scope — styled through ::deep or inline. */

.wm-files[b-akyo0fsvgj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
}

/* ── Header: title row + filter ── */
.wm-files-head[b-akyo0fsvgj] {
    flex-shrink: 0;
    padding: 4px 4px 6px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.wm-files-titlebar[b-akyo0fsvgj] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.wm-files-head-icon[b-akyo0fsvgj] {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 6px;
    color: var(--mud-palette-text-secondary);
}

.wm-files-title[b-akyo0fsvgj] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.wm-files[b-akyo0fsvgj]  .wm-files-text-btn {
    text-transform: none;
}

.wm-files-filter[b-akyo0fsvgj] {
    padding: 4px 6px 0 0;
}

.wm-files-filter[b-akyo0fsvgj]  .mud-input-control {
    margin: 0;
}

/* ── Body ── */
.wm-files-body[b-akyo0fsvgj] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 12px;
}

.wm-files-body[b-akyo0fsvgj]  .wm-files-refreshing {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.wm-files-skeleton[b-akyo0fsvgj] {
    padding: 8px 12px;
}

.wm-files-skeleton-row[b-akyo0fsvgj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.wm-files-skeleton-text[b-akyo0fsvgj] {
    flex: 1 1 auto;
}

.wm-files-message[b-akyo0fsvgj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.wm-files-section + .wm-files-section[b-akyo0fsvgj] {
    margin-top: 6px;
    border-top: 1px solid var(--mud-palette-divider);
}

.wm-files-section-title[b-akyo0fsvgj] {
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Rows ── */
.wm-files-row[b-akyo0fsvgj] {
    position: relative;
}

.wm-files-row-line[b-akyo0fsvgj] {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-right: 4px;
}

.wm-files-row-line:hover[b-akyo0fsvgj] {
    background: var(--mud-palette-action-default-hover);
}

/* The clickable body: a native <button> (Enter / Space for free) stripped of its own chrome. */
.wm-files-row-main[b-akyo0fsvgj] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 6px 4px 6px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.wm-files-row-main:focus-visible[b-akyo0fsvgj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 4px;
}

.wm-files-row--child > .wm-files-row-line .wm-files-row-main[b-akyo0fsvgj] {
    padding-left: 34px;
}

.wm-files-children .wm-files-children .wm-files-row-main[b-akyo0fsvgj] {
    padding-left: 54px;
}

.wm-files-row--older > .wm-files-row-line .wm-files-row-main[b-akyo0fsvgj] {
    opacity: 0.65;
}

/* "+N more" target: the message's files. */
.wm-files-row--highlight > .wm-files-row-line[b-akyo0fsvgj] {
    background: var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.08));
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.wm-files-row-icon[b-akyo0fsvgj] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.wm-files-row-cloud[b-akyo0fsvgj] {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-info);
}

.wm-files-row-text[b-akyo0fsvgj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wm-files-row-top[b-akyo0fsvgj] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Middle ellipsis: the head truncates, the tail (end of stem + extension) never does. */
.wm-files-row-name[b-akyo0fsvgj] {
    display: inline-flex;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.wm-files-row-name-head[b-akyo0fsvgj] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.wm-files-row-name-tail[b-akyo0fsvgj] {
    flex-shrink: 0;
    white-space: pre;
}

.wm-files-row-detail[b-akyo0fsvgj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── The single status slot (same colours as the chip's) ── */
.wm-files-status[b-akyo0fsvgj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px 1px 4px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.wm-files-status--updated[b-akyo0fsvgj],
.wm-files-status--cui[b-akyo0fsvgj] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.1));
}

.wm-files-status--noaccess[b-akyo0fsvgj] {
    color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover, rgba(244, 67, 54, 0.08));
}

.wm-files-status--oldercopy[b-akyo0fsvgj] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wm-files-status--saved[b-akyo0fsvgj] {
    color: var(--mud-palette-success-darken);
    background: var(--mud-palette-success-hover, rgba(76, 175, 80, 0.1));
}

/* ── Trailing ⋯: visible on hover / focus, always on touch layouts (layout kept so nothing shifts) ── */
.wm-files-row-more[b-akyo0fsvgj] {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 120ms ease;
}

.wm-files-row-line:hover .wm-files-row-more[b-akyo0fsvgj],
.wm-files-row-line:focus-within .wm-files-row-more[b-akyo0fsvgj],
.wm-files--touch .wm-files-row-more[b-akyo0fsvgj] {
    opacity: 1;
}

.wm-files-row-more[b-akyo0fsvgj]  .mud-icon-button {
    padding: 4px;
}

/* ── "{n} inside" / "{n} supporting files" ── */
.wm-files-toggle[b-akyo0fsvgj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 2px 40px;
    padding: 2px 8px 2px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.wm-files-toggle:hover[b-akyo0fsvgj] {
    background: var(--mud-palette-action-default-hover);
}

.wm-files-toggle:focus-visible[b-akyo0fsvgj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.wm-files-section > .wm-files-toggle[b-akyo0fsvgj] {
    margin-left: 12px;
    margin-top: 2px;
}

.wm-files-row--child > .wm-files-toggle[b-akyo0fsvgj] {
    margin-left: 62px;
}

/* ── Phones / the full-screen dialog: taller touch rows ── */
.wm-files--dialog .wm-files-row-main[b-akyo0fsvgj],
.wm-files--touch .wm-files-row-main[b-akyo0fsvgj] {
    padding-top: 10px;
    padding-bottom: 10px;
}

.wm-files--dialog .wm-files-head[b-akyo0fsvgj] {
    padding-top: 6px;
}

/* "Save all…" while Wingmate is replying: the wrapper carries the tooltip (a disabled button raises no hover events). */
.wm-files-save-all-wrap[b-akyo0fsvgj] {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 4px;
    outline: none;
}

.wm-files-save-all-wrap:focus-visible[b-akyo0fsvgj] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}
/* /Components/Components/AiChat/FileSaveApprovalCard.razor.rz.scp.css */
/* "Approve save to SharePoint" — the inline card above the composer, styled like the web-search approval (.websearch-approval in
   AiChat.razor.css: 1 px primary border, 12 px radius, surface background, margin 0 0 8px). Palette variables only (light and dark).
   MudBlazor roots are styled through ::deep from an element of ours. */

.filesave-card[b-40y8e3ae7t] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    margin: 0 0 8px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
    /* Keeps the progress bar (and anything absolutely placed) inside the rounded box; the focus ring is a box-shadow, so it isn't clipped. */
    overflow: hidden;
}

/* The header and the buttons always stay in view; only the body scrolls when the card is height-capped (below). */
.filesave-card-header[b-40y8e3ae7t],
.filesave-card-footer[b-40y8e3ae7t],
.filesave-card-summary[b-40y8e3ae7t] {
    flex-shrink: 0;
}

/* Height cap — the WHOLE card, against the space actually visible (dvh follows the phone's browser bars; vh is the fallback), so the
   composer below can never be pushed off screen: phones, a narrow chat column (docked preview / narrow window) and short windows. */
.filesave-card--mobile[b-40y8e3ae7t] {
    max-height: min(48vh, 440px);
    max-height: min(48dvh, 440px);
}

@container (max-width: 599.98px) {
    .filesave-card[b-40y8e3ae7t] {
        max-height: min(48vh, 440px);
        max-height: min(48dvh, 440px);
    }
}

@media (max-height: 760px) {
    .filesave-card[b-40y8e3ae7t] {
        max-height: min(48vh, 440px);
        max-height: min(48dvh, 440px);
    }
}

.filesave-card:focus-visible[b-40y8e3ae7t] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.filesave-card-header[b-40y8e3ae7t] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filesave-card-title[b-40y8e3ae7t] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pinned along the card's top edge, inside the border. width:auto matters: MudProgressLinear is width:100%, which with left/right offsets
   pushed the bar past the card's right edge. */
.filesave-card[b-40y8e3ae7t]  .filesave-card-progress {
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    width: auto;
}

.filesave-card-body[b-40y8e3ae7t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* Takes the room the cap leaves and scrolls inside it (no effect while the card isn't capped). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Collapsed (phones): hidden, not removed — the footer's primary button drives the form inside. */
.filesave-card-body--collapsed[b-40y8e3ae7t] {
    display: none;
}

/* The collapsed card's one line: "Q3.xlsx → OneDrive › Wingmate › Budget". */
.filesave-card-summary[b-40y8e3ae7t] {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filesave-card[b-40y8e3ae7t]  .filesave-card-details-toggle {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 6px;
    padding-right: 6px;
}

.filesave-card-hint[b-40y8e3ae7t] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.filesave-card-in-flight[b-40y8e3ae7t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.filesave-card-note[b-40y8e3ae7t] {
    font-size: 0.75rem;
}

.filesave-card-alert-actions[b-40y8e3ae7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* ── Footer: the stop-suggesting link on the left, the decisions on the right; everything wraps on narrow widths. ── */
.filesave-card-footer[b-40y8e3ae7t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.filesave-card-footer-actions[b-40y8e3ae7t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.filesave-card-unavailable[b-40y8e3ae7t] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.filesave-card[b-40y8e3ae7t]  .mud-button-root {
    text-transform: none;
}

.filesave-card[b-40y8e3ae7t]  .filesave-card-link {
    padding-left: 4px;
    padding-right: 4px;
}
/* /Components/Components/AiChat/FileSaveCuiBlock.razor.rz.scp.css */
/* The CUI-derived acknowledgement block (shared by FileSaveForm and FileSaveDialog's Save all). The MudAlert is MudBlazor's own —
   styled through ::deep from our wrapper. */

.wm-save-cui-block[b-oyajm41rgh] {
    min-width: 0;
}

.wm-save-cui-block[b-oyajm41rgh]  .wm-save-cui .mud-alert-message {
    min-width: 0;
}
/* /Components/Components/AiChat/FileSaveDialog.razor.rz.scp.css */
/* Wingmate's save dialog. MudBlazor roots keep their own scope — they are styled through ::deep from an element of ours, or
   inline. The dialog frame itself (ContentStyle) is set in the component: on phones the content scrolls between the title and
   the footer without viewport units. The single-file body is FileSaveForm, and Save all's location / CUI blocks are
   FileSaveLocationBlock / FileSaveCuiBlock — each carries its own (copied) rules; this sheet keeps the chrome and Save all's rows. */

.wm-save-title[b-d649sy0mmi] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.wm-save-title-text[b-d649sy0mmi] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-save-body[b-d649sy0mmi] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.wm-save-body[b-d649sy0mmi]  .wm-save-progress {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
}

/* ── Shared pieces Save all's rows use ── */
.wm-save-cui-tag[b-d649sy0mmi] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.12));
}

.wm-save-hint[b-d649sy0mmi] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.wm-save-body[b-d649sy0mmi]  .wm-save-text-btn {
    text-transform: none;
}

/* ── Save all ── */
.wm-save-all-rows[b-d649sy0mmi] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.wm-save-all-rows--mobile[b-d649sy0mmi] {
    max-height: none;
}

.wm-save-all-row[b-d649sy0mmi] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 10px 2px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.wm-save-all-row:last-child[b-d649sy0mmi] {
    border-bottom: none;
}

.wm-save-all-row--disabled[b-d649sy0mmi] {
    color: var(--mud-palette-text-disabled);
}

.wm-save-all-text[b-d649sy0mmi] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
}

.wm-save-all-name[b-d649sy0mmi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-save-all-state[b-d649sy0mmi] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.wm-save-all-state--saved[b-d649sy0mmi] {
    color: var(--mud-palette-success-darken);
}

.wm-save-all-state--failed[b-d649sy0mmi],
.wm-save-all-state--notsaved[b-d649sy0mmi] {
    color: var(--mud-palette-error-darken);
}

.wm-save-all-state--nameexists[b-d649sy0mmi] {
    color: var(--mud-palette-warning-darken);
}

.wm-save-all-open[b-d649sy0mmi] {
    color: var(--mud-palette-primary);
}

/* ── Footer ── */
.wm-save-actions[b-d649sy0mmi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.wm-save-actions[b-d649sy0mmi]  .mud-button-root {
    text-transform: none;
}

/* Phones: full-width buttons, the main one last (closest to the thumb). */
.wm-save-actions--mobile[b-d649sy0mmi] {
    flex-direction: column-reverse;
    align-items: stretch;
}
/* /Components/Components/AiChat/FileSaveForm.razor.rz.scp.css */
/* One file's save form (FileSaveDialog's single-file body and the approval card). These rules were the dialog's — scoped CSS doesn't
   cross components, so the form carries the ones its markup needs (class names unchanged). MudBlazor roots are styled through ::deep
   from an element of ours. */

.wm-save-form[b-jjp84pughh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.wm-save-form--compact[b-jjp84pughh] {
    gap: 8px;
}

/* ── The file being saved ── */
.wm-save-file[b-jjp84pughh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.wm-save-form--compact .wm-save-file[b-jjp84pughh] {
    padding: 6px 10px;
}

/* The name, with the origin line ("Created by Wingmate · 12:06 PM · 98 KB") under it. */
.wm-save-file-text[b-jjp84pughh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.wm-save-file-name[b-jjp84pughh] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-save-file-origin[b-jjp84pughh] {
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-save-file-size[b-jjp84pughh] {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.wm-save-cui-tag[b-jjp84pughh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.12));
}

/* ── Mode ── */
.wm-save-modes[b-jjp84pughh] {
    outline: none;
}

.wm-save-modes[b-jjp84pughh]  .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wm-save-modes[b-jjp84pughh]  .mud-radio {
    align-items: flex-start;
}

.wm-save-section[b-jjp84pughh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wm-save-hint[b-jjp84pughh] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.wm-save-hint--indent[b-jjp84pughh] {
    padding-left: 36px;
}

.wm-save-label[b-jjp84pughh] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wm-save-label--inline[b-jjp84pughh] {
    text-transform: none;
    letter-spacing: 0;
    margin-right: 4px;
}

.wm-save-form[b-jjp84pughh]  .wm-save-text-btn {
    text-transform: none;
}

/* ── Replace: targets + fidelity ── */
.wm-save-target[b-jjp84pughh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wm-save-fidelity[b-jjp84pughh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wm-save-checking[b-jjp84pughh],
.wm-save-fidelity-text[b-jjp84pughh] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
}

.wm-save-checking[b-jjp84pughh] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
}

.wm-save-losses[b-jjp84pughh] {
    margin: 4px 0;
}

.wm-save-losses summary[b-jjp84pughh] {
    cursor: pointer;
    font-weight: 500;
}

.wm-save-losses ul[b-jjp84pughh],
.wm-save-also ul[b-jjp84pughh] {
    margin: 4px 0 0;
    padding-left: 20px;
}

.wm-save-also[b-jjp84pughh] {
    font-size: 0.875rem;
}

/* ── Outcome alert (focused when it appears) ── */
.wm-save-alert[b-jjp84pughh] {
    outline: none;
    border-radius: 4px;
}

.wm-save-alert:focus-visible[b-jjp84pughh] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.wm-save-alert-actions[b-jjp84pughh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.wm-save-alert-actions:empty[b-jjp84pughh] {
    display: none;
}

.wm-save-alert-actions[b-jjp84pughh]  .mud-button-root {
    text-transform: none;
}
/* /Components/Components/AiChat/FileSaveLocationBlock.razor.rz.scp.css */
/* The save destination block (shared by FileSaveForm and FileSaveDialog's Save all). These rules are COPIED from the dialog's
   stylesheet — scoped CSS doesn't cross components. MudBlazor roots are styled through ::deep from an element of ours. */

.wm-save-location-block[b-5nqb1rcho2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-save-label[b-5nqb1rcho2] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wm-save-label--inline[b-5nqb1rcho2] {
    text-transform: none;
    letter-spacing: 0;
    margin-right: 4px;
}

.wm-save-location[b-5nqb1rcho2] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.wm-save-location-text[b-5nqb1rcho2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-save-location-block[b-5nqb1rcho2]  .wm-save-text-btn {
    text-transform: none;
}

/* "Change…" stays on one line (it wrapped to "Change" / "…" in the approval card on phones): the location text shrinks and ellipsises
   instead. */
.wm-save-location[b-5nqb1rcho2]  .wm-save-text-btn {
    flex-shrink: 0;
    min-width: max-content;
    white-space: nowrap;
}

.wm-save-location[b-5nqb1rcho2]  .wm-save-text-btn .mud-button-label {
    white-space: nowrap;
}

.wm-save-recent[b-5nqb1rcho2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.wm-save-recent[b-5nqb1rcho2]  .mud-chip {
    margin: 0;
    max-width: 100%;
}

.wm-save-recent-text[b-5nqb1rcho2] {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* /Components/Components/AiChat/LinkSuggestionStrip.razor.rz.scp.css */
.wm-link-suggestions[b-ql0m7ucjpa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
}

.wm-link-item[b-ql0m7ucjpa] {
    display: inline-flex;
    min-width: 0;
}

/* The several-links prompt: same dashed "suggested" look as a single suggested chip. */
.wm-link-group[b-ql0m7ucjpa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 2px 0 8px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 14px;
    font-size: 0.8125rem;
}

.wm-link-group-text[b-ql0m7ucjpa] {
    white-space: nowrap;
}

.wm-link-note[b-ql0m7ucjpa] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 2px 0 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.wm-link-suggestions[b-ql0m7ucjpa]  .wm-link-btn {
    text-transform: none;
    min-width: 0;
    padding: 0 6px;
    line-height: 1.4;
}

.wm-link-suggestions[b-ql0m7ucjpa]  .mud-icon-button {
    padding: 2px;
}

.wm-link-tooltip[b-ql0m7ucjpa] {
    text-align: left;
    max-width: 320px;
}
/* /Components/Components/AiChat/WingmateChart.razor.rz.scp.css */
/* Inline chart card (create_chart) — theme-aware, centered in the message column. The chart itself (canvas,
   download button, error fallback) is rendered by the shared StratusChart component. */
.wingmate-chart[b-hcccaxqoyz] {
    max-width: 800px;
    margin-inline: auto;   /* center the card (max-width + auto side margins) */
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 12px 4px;
    background: var(--mud-palette-surface);
}
/* /Components/Components/AiChat/WingmateCollapsedRail.razor.rz.scp.css */
/* Collapsed Wingmate rail — flyout popover styling. These selectors target elements authored in THIS component,
   so the Blazor scoped-CSS attribute travels with them into MudPopover's root-level portal and still applies.
   (MudPopover / MudIcon roots carry MudBlazor's scope, not ours — those few bits stay as inline Style.) */

.rail-anchor[b-afgond9jme] {
    position: relative;
}

/* Scrollable conversation list inside a flyout. */
.rail-scroll[b-afgond9jme] {
    padding: 4px 0;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 250px;
}

/* Groups list (folders + shared + ungrouped). max-height is a fallback cap; constrain() in the .razor.js tightens
   it to the exact space below the popover once MudBlazor has positioned it. */
.rail-groups[b-afgond9jme] {
    padding: 4px 0;
    min-width: 240px;
    max-height: 85vh;
    overflow-y: auto;
}

.rail-pop-title[b-afgond9jme] {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.55;
    padding: 6px 14px 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rail-row[b-afgond9jme] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
}

.rail-row:hover[b-afgond9jme] {
    background: var(--mud-palette-action-default-hover);
}

/* The group whose submenu is currently flown out — keeps a persistent highlight while you browse it. */
.rail-section-active[b-afgond9jme] {
    background: var(--mud-palette-action-default-hover);
}

.rail-empty[b-afgond9jme] {
    padding: 8px 14px;
    opacity: 0.6;
}

/* Two-line conversation item: title + origin/recency caption. */
.rail-conv[b-afgond9jme] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 180px;
    max-width: 300px;
}

.rail-conv-title[b-afgond9jme] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-conv-title.rail-current[b-afgond9jme] {
    color: var(--mud-palette-primary);
}

.rail-conv-sub[b-afgond9jme] {
    font-size: 0.72rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-section-name[b-afgond9jme] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-section-count[b-afgond9jme] {
    opacity: 0.5;
    font-size: 0.75rem;
}
/* /Components/Components/AiChat/WingmateFreshnessNotice.razor.rz.scp.css */
.wm-freshness-row[b-8ynourr8kk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.wm-freshness-text[b-8ynourr8kk] {
    flex: 1 1 260px;
    font-size: 0.85rem;
}

.wm-freshness-actions[b-8ynourr8kk] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.wm-freshness-actions[b-8ynourr8kk]  .mud-button-root {
    text-transform: none;
}

.wm-freshness-list[b-8ynourr8kk] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.8125rem;
}

.wm-freshness-list li[b-8ynourr8kk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 2px 0;
}

.wm-freshness-item-text[b-8ynourr8kk] {
    flex: 1 1 240px;
}

/* Why the last "Use latest" didn't switch a file. */
.wm-freshness-problem[b-8ynourr8kk] {
    font-size: 0.78rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-text-secondary));
}

.wm-freshness-actions[b-8ynourr8kk]  .wm-freshness-spinner {
    width: 14px;
    height: 14px;
}
/* /Components/Components/AiChat/WingmateInlineImage.razor.rz.scp.css */
/* An inline chart the Python sandbox produced.

   Capped in height on purpose: a matplotlib figure is often taller than it is wide, and an uncapped one would
   push the answer text off screen. Click to see it full size. */

.wm-inline-image[b-hhn1sygh3h] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 100%;
}

.wm-inline-img[b-hhn1sygh3h] {
    max-width: 100%;
    max-height: 420px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: zoom-in;
    background: #fff;   /* matplotlib writes transparent PNGs; a dark theme would otherwise show axes on black */
}

/* Fixed height while loading so a late-arriving image never reflows the transcript under the reader. */
.wm-inline-skeleton[b-hhn1sygh3h] {
    width: 320px;
    max-width: 100%;
}

.wm-inline-caption[b-hhn1sygh3h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    opacity: 0.75;
}

.wm-inline-name[b-hhn1sygh3h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

/* Big-image placeholder: the "tap to view" chip and its download button on one line. */
.wm-inline-deferred[b-hhn1sygh3h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
/* /Components/Components/AiChat/WingmateSearchDialog.razor.rz.scp.css */
.search-results[b-nicbxl3uen] {
    min-height: 120px;
    max-height: 55vh;
    overflow-y: auto;
}

.search-result-item[b-nicbxl3uen] {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.search-result-item:hover[b-nicbxl3uen] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Two-line clamp for the match snippet. */
.search-snippet[b-nicbxl3uen] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Matched-term highlight. ::deep because the <mark> is emitted from a MarkupString, which doesn't carry the CSS
   isolation scope attribute. `color: inherit` keeps snippet/title text readable in both light + dark themes. */
.search-result-item[b-nicbxl3uen]  .search-hl {
    background-color: rgba(var(--mud-palette-warning-rgb, 255, 193, 7), 0.32);
    color: inherit;
    font-weight: 600;
    border-radius: 2px;
    padding: 0 1px;
}
/* /Components/Components/AiChat/WingmateUsageDashboard.razor.rz.scp.css */
/* Wingmate usage dashboard. Numbers never wrap: a wide table scrolls sideways inside its card (MudTable
   HorizontalScrollbar / .usage-scroll-x) instead of squeezing columns or widening the page. */

/* MudTable renders its own th/td, so reach them with ::deep from this component's root. */
.usage-dashboard[b-k0dpsksqqi]  .usage-nowrap th,
.usage-dashboard[b-k0dpsksqqi]  .usage-nowrap td {
    white-space: nowrap;
}

/* The panel tables (tools, statistics): th/td are authored here, so plain scoped selectors reach them. */
.usage-scroll-x[b-k0dpsksqqi] {
    overflow-x: auto;
}

.usage-scroll-x th[b-k0dpsksqqi],
.usage-scroll-x td[b-k0dpsksqqi] {
    white-space: nowrap;
}

/* De-emphasized rows: the tool cost that isn't broken down by tool, and statistics with nothing to measure. */
.usage-muted td[b-k0dpsksqqi] {
    color: var(--mud-palette-text-secondary);
}

/* Info icon next to a muted label (MudIcon root, hence ::deep). */
.usage-dashboard[b-k0dpsksqqi]  .usage-info-icon {
    font-size: 14px;
    vertical-align: -2px;
    cursor: help;
}

/* Hairline share-of-tool-cost bar under a cost figure. */
.usage-share[b-k0dpsksqqi] {
    height: 3px;
    min-width: 48px;
    margin-top: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--mud-palette-lines-default);
}

.usage-share > div[b-k0dpsksqqi] {
    height: 100%;
    background: var(--mud-palette-primary);
}
/* /Components/Components/BlackoutOverlay.razor.rz.scp.css */
.blackout-overlay[b-0ld45pmjid] {
    position: absolute;
    inset: 0;
    background-color: #8b0000;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.blackout-content[b-0ld45pmjid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 580px;
    padding: 2rem;
    pointer-events: none;
}

[b-0ld45pmjid] .blackout-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0.75rem !important;
}

.blackout-divider[b-0ld45pmjid] {
    width: 100%;
    border: none;
    border-top: 2px solid rgba(255, 255, 255, 100);
    margin: 0.5rem 0 1rem 0;
}

[b-0ld45pmjid] .blackout-body {
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.6 !important;
}

[b-0ld45pmjid] .blackout-footer {
    color: rgba(255, 255, 255, 0.65) !important;
    font-style: italic !important;
    margin-top: 0.5rem !important;
    line-height: 1.5 !important;
}
/* /Components/Components/FileExplorer/FileExplorerContextMenu.razor.rz.scp.css */
.mobile-menu-button[b-060dsuc661] {
    padding: 8px;
    margin: 0;
}

    .mobile-menu-button[b-060dsuc661]  .mud-icon-root {
        font-size: 24px;
    }

/* Increase touch target size */
@media (max-width: 600px) {
    .mobile-menu-button[b-060dsuc661] {
        min-width: 48px;
        height: 48px;
    }
}
/* /Components/Components/FileExplorer/FileExplorerMobileMenu.razor.rz.scp.css */
.file-explorer-mobile-menu[b-q1p74g4yyt] {
    width: 100%;
}

[b-q1p74g4yyt] .mud-dialog-content {
    padding: 0 !important;
}

[b-q1p74g4yyt] .mud-list-item {
    padding: 16px;
    min-height: 56px;
}

[b-q1p74g4yyt] .mud-icon-size-medium {
    font-size: 24px;
}

[b-q1p74g4yyt] .mud-list-item-icon {
    min-width: 42px;
    margin-right: 16px;
}

[b-q1p74g4yyt] .mud-list-item-text {
    font-size: 16px;
}

[b-q1p74g4yyt] .mud-divider {
    margin: 8px 0;
}

[b-q1p74g4yyt] .mud-dialog-title {
    padding: 16px;
}

[b-q1p74g4yyt] .mud-dialog-actions {
    padding: 16px;
    justify-content: center;
}

[b-q1p74g4yyt] .mud-button-filled {
    border-radius: 24px;
    padding: 12px;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
}
/* /Components/Components/FileExplorer/FileExplorerSearchDialog.razor.rz.scp.css */
/* /Components/Components/FileExplorer/FileExplorerThumbnail.razor.rz.scp.css */
/* CUI (Controlled Unclassified Information) corner badge on file tiles.
   .cui-tile-badge handles corner positioning; .cui-tile-chip is the visible badge whose
   font-size is set inline (TileSize-based) so it scales with the tile. Padding/radius use em
   so they scale with that font-size. */
.cui-tile-badge[b-yoaawxb2oa] {
    position: absolute;
    top: 2%;
    right: 2%;
    z-index: 2;
}

.cui-tile-chip[b-yoaawxb2oa] {
    background-color: var(--mud-palette-error);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    padding: 0.25em 0.45em;
    border-radius: 0.3em;
    white-space: nowrap;
}
/* /Components/Components/InventoryControl/LocationManagement/LocationListSidebar.razor.rz.scp.css */
/* LocationListSidebar — right-edge overlay panel. Sits inside .lm-map-area,
   positioned absolutely so opening it doesn't reflow the map (Panzoom stays
   stable; no JS re-init). z-index 45 leaves the calibration card (50) on top
   when both happen to coexist. */

.lm-sidebar[b-9b1sj5g3jp] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 90%;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-divider);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 45;
    display: flex;
    flex-direction: column;
    /* Tap target for touch screens — tweak in one place. */
    --lm-sb-row-h: 36px;
}

.lm-sb-header[b-9b1sj5g3jp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.lm-sb-title[b-9b1sj5g3jp] {
    font-weight: 600;
    font-size: 0.95rem;
}

.lm-sb-modes[b-9b1sj5g3jp] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Two-row toggle-item layout — label on top, count below. Keeps the buttons
   compact horizontally so all three fit within the sidebar's 320px without
   wrapping, while still surfacing the count at a readable size. */
.lm-sb-tab[b-9b1sj5g3jp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    padding: 2px 4px;
    gap: 2px;
}

.lm-sb-tab-label[b-9b1sj5g3jp] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lm-sb-tab-count[b-9b1sj5g3jp] {
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    padding: 0 5px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    min-width: 26px;
    text-align: center;
}

.lm-sb-filter[b-9b1sj5g3jp] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.lm-sb-list[b-9b1sj5g3jp] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.lm-sb-empty[b-9b1sj5g3jp] {
    padding: 16px 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.lm-sb-row[b-9b1sj5g3jp] {
    min-height: var(--lm-sb-row-h);
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.1s ease, border-left-color 0.1s ease;
}

.lm-sb-row:hover[b-9b1sj5g3jp] {
    background: var(--mud-palette-action-default-hover);
}

.lm-sb-key[b-9b1sj5g3jp] {
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placing — the row whose Location matches PlacingLocationKey. Amber tint +
   left border so the user can spot which one their next map click commits
   to, even after scrolling within the list. */
.lm-sb-row.placing[b-9b1sj5g3jp] {
    background: var(--mud-palette-warning-hover);
    border-left: 3px solid var(--mud-palette-warning);
    padding-left: 7px;
}

.lm-sb-row.orphan-row .lm-sb-key[b-9b1sj5g3jp] {
    color: var(--mud-palette-error);
}

.lm-sb-row.unplaced .lm-sb-key[b-9b1sj5g3jp] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}
/* /Components/Components/InventoryControl/LocationManagement/LocationManagement.razor.rz.scp.css */
.lm-root[b-059woxs6z4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.lm-toolbar[b-059woxs6z4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    flex-wrap: wrap;
}

.lm-warehouse[b-059woxs6z4] {
    min-width: 110px;
    max-width: 140px;
}

.lm-search[b-059woxs6z4] {
    min-width: 240px;
    max-width: 320px;
    flex: 1 1 auto;
}

.lm-status[b-059woxs6z4] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.lm-map-area[b-059woxs6z4] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Keyboard-focusable wrapper around the MapView. Must fill its parent
   explicitly so the MapView's height:100% resolves to the visible flex-
   item height (instead of falling back to the warehouse image's natural
   size, which would push HUD overlays like the scale legend below the
   visible bounds and into .lm-map-area's overflow:hidden clip region). */
.lm-map-host[b-059woxs6z4] {
    position: relative;
    width: 100%;
    height: 100%;
}

.lm-loader[b-059woxs6z4],
.lm-empty[b-059woxs6z4] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--mud-palette-text-primary);
}

.lm-empty[b-059woxs6z4] {
    gap: 8px;
}

/* Inline calibration card — floating overlay positioned over the map. Stays
   visible while the user clicks reference points so the canvas remains
   interactive. Top-right placement keeps it clear of typical click targets. */
.lm-cal-card[b-059woxs6z4] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 50;
    width: 320px;
    max-width: calc(100% - 24px);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    pointer-events: auto;
}

.lm-cal-card-header[b-059woxs6z4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Drag affordance: pointer cursor + touch-action: none so the browser
   doesn't fight pointer events with native scroll/pan gestures. */
.lm-cal-card-drag-handle[b-059woxs6z4] {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.lm-cal-drag-grip[b-059woxs6z4] {
    opacity: 0.7;
}

.lm-cal-card-title[b-059woxs6z4] {
    font-weight: 600;
    flex: 1 1 auto;
}

.lm-cal-card-step[b-059woxs6z4] {
    font-size: 0.75rem;
    opacity: 0.85;
}

.lm-cal-card-body[b-059woxs6z4] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lm-cal-prompt[b-059woxs6z4] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.lm-cal-hint[b-059woxs6z4] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.lm-cal-inputs[b-059woxs6z4] {
    display: flex;
    gap: 8px;
}

.lm-cal-summary[b-059woxs6z4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    background: var(--mud-palette-background-grey);
    padding: 8px 10px;
    border-radius: 4px;
}

.lm-cal-summary > div[b-059woxs6z4] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.lm-cal-summary span[b-059woxs6z4] {
    color: var(--mud-palette-text-secondary);
}

.lm-cal-card-actions[b-059woxs6z4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ─── Path-edit context menu ─────────────────────────────────────────────
   Positioned via inline style:left/top from the right-click clientX/Y.
   Fixed positioning so the coords are viewport-relative (matches what
   captures gave us). z-index above the map but below dialogs. */
.lm-path-ctx-menu[b-059woxs6z4] {
    z-index: 1300;
    min-width: 220px;
    pointer-events: auto;
}
.lm-path-ctx-menu[b-059woxs6z4]  .mud-list-item {
    cursor: pointer;
}
/* Invisible backdrop captures outside-clicks to close the menu. Fills the
   viewport just below the menu in stacking order. */
.lm-path-ctx-backdrop[b-059woxs6z4] {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: transparent;
}
/* /Components/Components/InventoryControl/LocationManagement/MapCalibrationLayer.razor.rz.scp.css */
/* MapCalibrationLayer — reference dots placed during the inline calibration
   flow. Non-interactive; calibration clicks are captured by MapView's base
   overlay svg, not by this layer. */

.ml-cal-layer[b-jw5jo5c1bd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Numbered dots — success-green so they read as "calibration setup",
   distinct from primary-blue location markers. The halo pulses gently
   to draw the eye to where the user just clicked. */
.ml-cal-point[b-jw5jo5c1bd] {
    pointer-events: none;
}

.ml-cal-point-halo[b-jw5jo5c1bd] {
    fill: none;
    stroke: var(--mud-palette-success);
    stroke-width: 2;
    opacity: 0.6;
    animation: ml-cal-pulse-b-jw5jo5c1bd 1.5s ease-in-out infinite;
}

.ml-cal-point-dot[b-jw5jo5c1bd] {
    fill: var(--mud-palette-success);
    stroke: white;
    stroke-width: 2.5;
}

@keyframes ml-cal-pulse-b-jw5jo5c1bd {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
/* /Components/Components/InventoryControl/LocationManagement/MapLegend.razor.rz.scp.css */
/* MapLegend — minimizable scale + axis indicator card, bottom-left of the
   map viewport. Positioned absolute against the MapView's root (not inside
   the transformed div) so it doesn't scale with Panzoom. */

.ml-legend[b-ca0koaa5lt] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 40;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    pointer-events: auto;
    user-select: none;
    color: var(--mud-palette-text-primary);
}

.ml-legend.collapsed[b-ca0koaa5lt] {
    padding: 0;
}

.ml-legend-expand[b-ca0koaa5lt] {
    /* MudIconButton already has its own padding; nothing extra here. */
}

.ml-legend-header[b-ca0koaa5lt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.ml-legend-title[b-ca0koaa5lt] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.ml-legend-body[b-ca0koaa5lt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}

.ml-legend-axes[b-ca0koaa5lt] {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.ml-legend-axis-line[b-ca0koaa5lt] {
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.ml-legend-axis-label[b-ca0koaa5lt] {
    fill: currentColor;
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.ml-legend-axis-origin[b-ca0koaa5lt] {
    fill: currentColor;
}

.ml-legend-scale[b-ca0koaa5lt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.ml-legend-bar[b-ca0koaa5lt] {
    height: 6px;
    background: var(--mud-palette-text-primary);
    border-left: 1px solid var(--mud-palette-text-primary);
    border-right: 1px solid var(--mud-palette-text-primary);
    border-top: 1px solid var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    transition: width 0.15s ease;
}

.ml-legend-bar-label[b-ca0koaa5lt] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
/* /Components/Components/InventoryControl/LocationManagement/MapLocationLayer.razor.rz.scp.css */
/* MapLocationLayer — markers + their drag visuals. The svg itself has
   pointer-events:none; interactive child elements (marker hits) opt in via
   pointer-events:auto. In path-edit mode the hits go non-interactive so
   clicks fall through to the path layer underneath. */

.ml-location-layer[b-tlp4og0ir8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* svg root is non-interactive — child hits opt in below. */
    pointer-events: none;
    overflow: visible;
}

/* Marker hit region — transparent, large enough for touch. */
.ml-marker-hit[b-tlp4og0ir8] {
    fill: transparent;
    cursor: pointer;
    pointer-events: auto;
}

/* PathEdit mode disables marker hit-testing so the path layer captures
   clicks instead. The marker still RENDERS as backdrop — the picker's
   spatial context remains visible while the user edits the path graph. */
.ml-location-layer.mode-pathedit .ml-marker-hit[b-tlp4og0ir8] {
    pointer-events: none !important;
    cursor: default;
}

/* Read-only consumers (e.g. the picker dialog) also disable hit-testing
   so touches on markers fall through to Panzoom on .mv-transform for
   clean pinch-zoom + pan. The JS drag/click module isn't initialized
   at all in this mode — see MapLocationLayer's ReadOnly parameter. */
.ml-location-layer.read-only .ml-marker-hit[b-tlp4og0ir8] {
    pointer-events: none !important;
    cursor: default;
}

/* Halo ring — hidden by default; shown for search matches and the picking-
   app target marker. Two stacked rings let the pulse animation read as a
   wave. */
.ml-marker-halo[b-tlp4og0ir8] {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-width: 3;
    opacity: 0;
    pointer-events: none;
}

/* Visible dot — bigger than before so it's easier to spot at typical zoom. */
.ml-marker-dot[b-tlp4og0ir8] {
    fill: var(--mud-palette-primary);
    stroke: white;
    stroke-width: 2.5;
    pointer-events: none;
    transition: r 0.15s ease, fill 0.15s ease;
}

.ml-marker:hover .ml-marker-dot[b-tlp4og0ir8] {
    r: 17;
}

.ml-marker.highlighted .ml-marker-dot[b-tlp4og0ir8] {
    fill: var(--mud-palette-warning);
    r: 17;
}

/* Orphan markers — the location key has a coordinates row but isn't in XA's
   active warehouse-locations list (typo, deactivated location, etc). Tint
   them red with a dashed stroke so the user can spot stale rows on the map
   and decide whether to delete the placement or re-create the XA row.
   Wins over `.highlighted` when both classes are present so an orphan can't
   masquerade as a normal highlighted marker. */
.ml-marker.orphan .ml-marker-dot[b-tlp4og0ir8],
.ml-marker.orphan .ml-marker-dot-cluster[b-tlp4og0ir8] {
    fill: var(--mud-palette-error);
    stroke: white;
    stroke-dasharray: 3 3;
}
.ml-marker.orphan.highlighted .ml-marker-dot[b-tlp4og0ir8] {
    fill: var(--mud-palette-error);
}

/* Search match — large pulsing halo around the dot. Two ring elements pulse
   out of phase so the eye reads a continuous wave. */
.ml-marker.search-match .ml-marker-halo[b-tlp4og0ir8] {
    opacity: 1;
    animation: ml-halo-pulse-b-tlp4og0ir8 1.6s ease-out infinite;
}
.ml-marker.search-match .ml-marker-halo-outer[b-tlp4og0ir8] {
    animation-delay: 0.8s;
}

@keyframes ml-halo-pulse-b-tlp4og0ir8 {
    0%   { r: 18; opacity: 0.9; stroke-width: 4; }
    100% { r: 42; opacity: 0;   stroke-width: 1; }
}

/* Marker kinds — used by the picking-app viewer to distinguish the current
   pick target from the picker's last pick. */
.ml-marker.kind-target .ml-marker-dot[b-tlp4og0ir8] {
    fill: var(--mud-palette-warning);
    r: 10;
}
.ml-marker.kind-target .ml-marker-halo[b-tlp4og0ir8] {
    stroke: var(--mud-palette-warning);
    opacity: 1;
    animation: ml-target-pulse-b-tlp4og0ir8 1.4s ease-out infinite;
}
.ml-marker.kind-target .ml-marker-halo-outer[b-tlp4og0ir8] {
    animation-delay: 0.7s;
}

@keyframes ml-target-pulse-b-tlp4og0ir8 {
    0%   { r: 20; opacity: 0.85; stroke-width: 4; }
    100% { r: 54; opacity: 0;    stroke-width: 1; }
}

/* Last-pick marker = the picker's current physical location. The PIN above
   the marker anchor (rendered for kind-lastpick) is the primary visual; the
   underlying dot is intentionally tiny — just a small accent at the pin's
   tip so the actual anchor point still has a marker to pulse around. */
.ml-marker.kind-lastpick .ml-marker-dot[b-tlp4og0ir8] {
    fill: var(--mud-palette-info);
    stroke: none;
    r: 3;
    opacity: 0.85;
}

.ml-marker.kind-lastpick .ml-marker-halo[b-tlp4og0ir8] {
    stroke: var(--mud-palette-info);
    opacity: 1;
    animation: ml-lastpick-pulse-b-tlp4og0ir8 1.6s ease-out infinite;
}
.ml-marker.kind-lastpick .ml-marker-halo-outer[b-tlp4og0ir8] {
    animation-delay: 0.8s;
}

@keyframes ml-lastpick-pulse-b-tlp4og0ir8 {
    0%   { r: 4;  opacity: 0.6; stroke-width: 4; }
    100% { r: 26; opacity: 0;   stroke-width: 1; }
}

/* Destination pin above the target marker — classic Google-Maps style
   teardrop in warning-color. */
.ml-marker-pin[b-tlp4og0ir8] {
    fill: var(--mud-palette-warning);
    stroke: white;
    stroke-width: 2;
    pointer-events: none;
}
.ml-marker-pin-dot[b-tlp4og0ir8] {
    fill: white;
    stroke: none;
    pointer-events: none;
}

/* "You are here" person silhouette above the LastPick marker. */
.ml-marker-person[b-tlp4og0ir8] {
    fill: var(--mud-palette-info);
    stroke: white;
    stroke-width: 2;
    pointer-events: none;
}

.ml-marker.dimmed[b-tlp4og0ir8] {
    opacity: 0.15;
}

/* Live-drag state — JS adds this class while the user is dragging the dot
   so we can bump the dot's prominence. */
.ml-marker.dragging[b-tlp4og0ir8] {
    cursor: grabbing !important;
}
.ml-marker.dragging .ml-marker-dot[b-tlp4og0ir8] {
    r: 20;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.ml-marker.reposition-target .ml-marker-dot[b-tlp4og0ir8] {
    fill: transparent;
    stroke: var(--mud-palette-warning);
    stroke-width: 2;
    stroke-dasharray: 3 2;
    animation: ml-rep-pulse-b-tlp4og0ir8 1.5s ease-in-out infinite;
}

@keyframes ml-rep-pulse-b-tlp4og0ir8 {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Stacked-location "cluster" marker — slightly larger dot than the single-
   location variant so the count text fits inside without crowding. */
.ml-marker-dot-cluster[b-tlp4og0ir8] {
    fill: var(--mud-palette-primary);
    stroke: white;
    stroke-width: 3;
    pointer-events: none;
    transition: r 0.15s ease, fill 0.15s ease;
    r: 18;
}

.ml-marker:hover .ml-marker-dot-cluster[b-tlp4og0ir8] {
    r: 20;
}

.ml-marker.highlighted .ml-marker-dot-cluster[b-tlp4og0ir8] {
    fill: var(--mud-palette-warning);
    r: 20;
}

.ml-marker.dragging .ml-marker-dot-cluster[b-tlp4og0ir8] {
    r: 22;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
/* /Components/Components/InventoryControl/LocationManagement/MapPathLayer.razor.rz.scp.css */
/* MapPathLayer — waypoints + segments + direction arrows. Pointer events:
   the svg root is pointer-events:none outside edit mode; in edit mode the
   svg becomes pointer-events:auto so empty-area clicks land here (the path
   editor's pen-tool flow) instead of falling through to the base overlay. */

.ml-path-layer[b-bvaecstccc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.ml-path-layer.edit-mode[b-bvaecstccc] {
    pointer-events: auto;
}

/* Transparent click-capture extending far beyond the warehouse image so
   the pen-tool's empty-click flow lands anywhere the user can pan to —
   including the satellite overflow area and surrounding whitespace. The
   rect carries no data-path-* attribute so the JS findWaypoint/findSegment
   look-ups return null, routing the click into the empty-area branch. */
.ml-path-edit-capture[b-bvaecstccc] {
    fill: transparent;
    pointer-events: auto;
}

/* Segments — magenta/purple (MudBlazor secondary). High-contrast against
   typical warehouse map backgrounds AND against the other map colors
   (primary-blue location dots, warning-orange target, info-blue route).
   Counter-scaled stroke via --map-zoom CSS var (published by MapView's JS
   on every panzoomchange). */
.ml-path-segment[b-bvaecstccc] {
    stroke: var(--mud-palette-secondary, #ff1493);
    stroke-width: calc(6px / var(--map-zoom, 1));
    stroke-linecap: round;
    fill: none;
    opacity: 1;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}
/* In edit mode segments become click targets. */
.ml-path-network.edit .ml-path-segment[b-bvaecstccc] {
    pointer-events: stroke;
    cursor: pointer;
}

.ml-path-segment.selected[b-bvaecstccc] {
    stroke: var(--mud-palette-warning);
    stroke-width: calc(8px / var(--map-zoom, 1));
    opacity: 1;
}

/* Direction arrows at segment midpoints. */
.ml-path-arrow[b-bvaecstccc] {
    pointer-events: none;
}
.ml-path-arrow-tri[b-bvaecstccc] {
    fill: var(--mud-palette-secondary, #ff1493);
    stroke: white;
    stroke-width: 0.6;
    stroke-linejoin: round;
}

/* Waypoints — green dot with white outline, counter-scaled via inner <g>. */
.ml-path-waypoint-dot[b-bvaecstccc] {
    fill: var(--mud-palette-success, #2e7d32);
    stroke: white;
    stroke-width: 2;
    pointer-events: none;
}
.ml-path-waypoint-hit[b-bvaecstccc] {
    fill: transparent;
    pointer-events: none;
}
.ml-path-waypoints.edit .ml-path-waypoint-hit[b-bvaecstccc] {
    pointer-events: visiblePainted;
    cursor: pointer;
}
.ml-path-waypoints.edit .ml-path-waypoint[b-bvaecstccc] {
    cursor: pointer;
}
.ml-path-waypoint.selected .ml-path-waypoint-dot[b-bvaecstccc] {
    fill: var(--mud-palette-warning);
    r: 11;
}
.ml-path-waypoint.pen-anchor .ml-path-waypoint-dot[b-bvaecstccc] {
    stroke: var(--mud-palette-warning);
    stroke-width: 3;
}
.ml-path-waypoint.dragging .ml-path-waypoint-dot[b-bvaecstccc] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    r: 10;
}
/* /Components/Components/InventoryControl/LocationManagement/MapRouteLayer.razor.rz.scp.css */
/* MapRouteLayer — non-interactive overlay layer for the route polyline /
   straight-line connection. The svg itself has pointer-events:none so
   clicks pass through to layers below. */

.ml-route-layer[b-ewjbqze1i0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Route line. Magenta to match the management view's path-network segments
   so the two read as a single visual language ("this is a path", whether
   you're editing or following one). Counter-scaled stroke + drop shadow
   for high contrast against typical warehouse map backgrounds. */
.ml-route-line[b-ewjbqze1i0] {
    stroke: var(--mud-palette-secondary, #ff1493);
    stroke-width: calc(6px / var(--map-zoom, 1));
    stroke-linecap: round;
    fill: none;
    opacity: 1;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

/* Direction arrow at each segment midpoint — tells the picker which way to
   walk. Counter-scaled via the inline transform on the wrapping <g> (same
   factor MapPathLayer uses for its segment arrows). */
.ml-route-arrow[b-ewjbqze1i0] {
    pointer-events: none;
}
.ml-route-arrow-tri[b-ewjbqze1i0] {
    fill: var(--mud-palette-secondary, #ff1493);
    stroke: white;
    stroke-width: 0.6;
    stroke-linejoin: round;
}
/* /Components/Components/InventoryControl/LocationManagement/MapSatelliteLayer.razor.rz.scp.css */
/* MapSatelliteLayer — background reference image. Positioned absolute
   inside .mv-transform so it sits in the same coord space as the warehouse
   map and gets Panzoom's outer scale/translate applied. The CSS matrix
   transform in the inline style aligns satellite-image-pixel coords to
   warehouse-image-pixel coords.

   pointer-events: auto so pan gestures (Panzoom listens on .mv-transform)
   still work when the user starts a drag on the satellite-only area outside
   the warehouse image's bounding box. Marker/segment/base-overlay layers
   are higher in z-order so they still intercept their own clicks inside
   the warehouse area — the satellite only "captures" gestures that would
   otherwise land on nothing. */

.ml-satellite-image[b-a08didrou1] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
    /* Don't influence the parent inline-block .mv-transform's sizing — that
       comes from the warehouse <img>. */
    max-width: none;
}
/* /Components/Components/InventoryControl/LocationManagement/MapView.razor.rz.scp.css */
/* MapView — composition root. Owns viewport, transform, base image, banners,
   and the base overlay SVG. Layer-specific styling lives in each layer's own
   scoped .razor.css. */

.mv-root[b-0qgw2qrizy] {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

/* Banner for any active interaction mode (reposition / calibration / path-
   edit). Same warning pill across modes so the user reads "you're in a
   special state" at a glance. */
.mv-banner[b-0qgw2qrizy] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    max-width: calc(100% - 32px);
}

.mv-viewport[b-0qgw2qrizy] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    /* touch-action: none disables the browser's default touch behaviors
       (page pinch-zoom, swipe-to-navigate, double-tap-zoom). Panzoom needs
       this to fully own the multi-touch gestures — without it the browser
       can swallow one of the pinch pointers before Panzoom sees it, which
       makes pinch-zoom feel "glitchy" on phones/tablets. Applies to the
       whole map area so a gesture that starts on whitespace works the
       same as one that starts on the warehouse image. */
    touch-action: none;
}

.mv-viewport:active[b-0qgw2qrizy] {
    cursor: grabbing;
}

/* Crosshair cursor for modes that capture a position rather than pan the
   map. The same rule covers the image AND the base overlay AND any layer's
   svg root (layers use `pointer-events:none` on their svg in non-edit modes
   so the cursor falls through to the overlay below — but the cursor itself
   reads off the topmost element). */
.mv-root.reposition-mode .mv-viewport[b-0qgw2qrizy],
.mv-root.reposition-mode .mv-transform[b-0qgw2qrizy],
.mv-root.reposition-mode .mv-base-image[b-0qgw2qrizy],
.mv-root.reposition-mode .mv-base-overlay[b-0qgw2qrizy],
.mv-root.calibration-mode .mv-viewport[b-0qgw2qrizy],
.mv-root.calibration-mode .mv-transform[b-0qgw2qrizy],
.mv-root.calibration-mode .mv-base-image[b-0qgw2qrizy],
.mv-root.calibration-mode .mv-base-overlay[b-0qgw2qrizy],
.mv-root.path-edit-mode .mv-viewport[b-0qgw2qrizy],
.mv-root.path-edit-mode .mv-transform[b-0qgw2qrizy],
.mv-root.path-edit-mode .mv-base-image[b-0qgw2qrizy],
.mv-root.path-edit-mode .mv-base-overlay[b-0qgw2qrizy] {
    cursor: crosshair !important;
}

/* The transform target — Panzoom mutates this element's transform. The image
   and the layer svgs are both inside, so they move together. */
.mv-transform[b-0qgw2qrizy] {
    position: relative;
    display: inline-block;
    transform-origin: 0 0;
}

.mv-base-image[b-0qgw2qrizy] {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Base overlay svg — catches empty-map clicks anywhere in the visible map
   area, including OUTSIDE the warehouse image's natural-pixel bounding box
   (the satellite reference layer can extend well beyond the warehouse, as
   can plain whitespace at high zoom-out). We deliberately oversize the
   overlay far beyond the warehouse rect so clicks there still convert into
   feet coords (via linear extrapolation of the warehouse calibration) and
   the user can place locations/waypoints outside the warehouse image.
   The path layer in edit mode also adds its own oversized capture rect so
   the same applies to PathEdit empty-clicks. */
.mv-base-overlay[b-0qgw2qrizy] {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 30000px;
    height: 30000px;
    pointer-events: auto;
    /* SVG defaults to overflow:hidden, which clips overlays that extend past
       the image edge. The transformed container is sized to the image, so
       overflow:visible lets layer elements render into surrounding
       whitespace when the user zooms out. */
    overflow: visible;
}

.mv-empty[b-0qgw2qrizy] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Components/LabelPrinter/LookupStatusDisplay.razor.rz.scp.css */
/* Read-only lookup status display - intentionally NOT input-shaped */
.lookup-status[b-rev27g2w5u] {
    background: repeating-linear-gradient(
        135deg,
        rgba(var(--mud-palette-text-secondary-rgb, 100, 100, 100), 0.03),
        rgba(var(--mud-palette-text-secondary-rgb, 100, 100, 100), 0.03) 8px,
        rgba(var(--mud-palette-text-secondary-rgb, 100, 100, 100), 0.06) 8px,
        rgba(var(--mud-palette-text-secondary-rgb, 100, 100, 100), 0.06) 16px
    );
    background-color: rgba(var(--mud-palette-text-secondary-rgb, 100, 100, 100), 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-text-secondary);
    padding: 10px 14px;
    min-height: 56px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.lookup-status-body[b-rev27g2w5u] {
    min-width: 0;
    flex: 1 1 auto;
}

.lookup-status-label[b-rev27g2w5u] {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

.lookup-status-value[b-rev27g2w5u] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Components/LoginPage.razor.rz.scp.css */
.stratus-description[b-7owu3nwbk9] {
    width: 50%;
}

@media (width < 1000px) {
    .stratus-description[b-7owu3nwbk9] {
        width: 75%;
    }
}

@media (width < 600px) {
    .stratus-description[b-7owu3nwbk9] {
        width: 100%;
    }
}

/* /Components/Components/MessengerApp/MessengerConversationImage.razor.rz.scp.css */

/* /Components/Components/MessengerApp/MessengerDrawer.razor.rz.scp.css */
.sidebar[b-19kgujp8e3] {
    background-color: var(--mud-palette-surface);
}

.expanded[b-19kgujp8e3] {
    flex-basis: 425px;
    transition: 300ms;
}

.not-expanded[b-19kgujp8e3] {
    flex-basis: 50px;
    transition: 300ms;
}

.not-expanded-mobile[b-19kgujp8e3] {
    flex-basis: 50px;
    transition: 300ms;
}

.not-expanded-extended[b-19kgujp8e3] {
    flex-basis: 75px;
    transition: 300ms;
}

.not-expanded-extended-mobile[b-19kgujp8e3] {
    flex-basis: 62px;
    transition: 300ms;
}

.conversation[b-19kgujp8e3] {
    cursor: pointer;
    /* Unselected rows sit on Background-grey so they read as distinct list items
       against the lighter Surface sidebar (in both themes). */
    background-color: var(--mud-palette-background-grey);
}

    .conversation.selected-conversation[b-19kgujp8e3] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    }

    .conversation:not(.selected-conversation):hover[b-19kgujp8e3] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    }

.conversation-name[b-19kgujp8e3] {
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
}

.conversation-recipients[b-19kgujp8e3] {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.last-message-sender[b-19kgujp8e3] {
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
}

.last-message[b-19kgujp8e3] {
    font-size: 13px;
    font-style: italic;
    font-weight: 300;
}

@media (width < 350px) {
    .not-expanded[b-19kgujp8e3] {
        display: none;
    }
}

@media (width < 850px) {
    .expanded[b-19kgujp8e3] {
        flex-basis: 100%;
    }
}
/* /Components/Components/MessengerApp/MessengerMessage.razor.rz.scp.css */
.other-message-label[b-mlm7xphe7k] {
    margin-left: 42px;
    font-size: 0.8em;
    color: var(--mud-palette-text-secondary);
}

.same-sender-same-time[b-mlm7xphe7k] {
    margin-left: 34px;
    margin-top: 5px;
}

.same-sender-same-time-edited[b-mlm7xphe7k] {
    margin-left: 34px;
    margin-top: 0px;
}

.same-sender-different-time[b-mlm7xphe7k] {
    margin-left: 34px;
    margin-top: 0px;
}

.different-sender[b-mlm7xphe7k] {
    margin-top: 0px;
}

.overall-same-sender[b-mlm7xphe7k] {
    margin-top: 0px;
}

.overall-different-sender[b-mlm7xphe7k] {
    margin-top: 15px;
}


.my-message-label[b-mlm7xphe7k] {
    margin-right: 5px;
    font-size: 0.8em;
    color: var(--mud-palette-text-secondary);
}

.overall-same-sender-me[b-mlm7xphe7k] {
    margin-top: 0px;
}

.overall-different-sender-me[b-mlm7xphe7k] {
    margin-top: 15px;
}

.same-sender-same-time-me[b-mlm7xphe7k] {
    margin-top: 5px;
}

.same-sender-different-time-me[b-mlm7xphe7k] {
    margin-top: 0px;
}

.same-sender-edited-me[b-mlm7xphe7k] {
    margin-top: 0px;
}

.different-sender-me[b-mlm7xphe7k] {
    margin-top: 0px;
}
/* /Components/Components/MessengerApp/MessengerSearchSideBar.razor.rz.scp.css */
.search-message[b-g3d30eb4sh] {
    /* Override Bootstrap .border default (not theme-aware) with the palette line token. */
    border-color: var(--mud-palette-lines-default) !important;
}

.search-message:hover[b-g3d30eb4sh] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    cursor: pointer;
}

.search-message-time[b-g3d30eb4sh] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
}
/* /Components/Components/PdfViewer/StratusPdfViewer.razor.rz.scp.css */
/* =============================================
   Stratus PDF Viewer 2 - Chrome/Edge-like styling
   Theme-reactive: the viewer chrome follows the app theme via MudBlazor palette
   tokens. The toolbar reuses the app-bar tokens so it reads as a mini app bar in
   both light and dark. (The PDF content itself is rendered by the browser's native
   viewer inside the iframe and cannot be themed here.)
   ============================================= */

.stratus-pdf2[b-3p3re9l4qa] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    position: relative;
}

/* ---- Toolbar ---- */
.stratus-pdf2-toolbar[b-3p3re9l4qa] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    padding: 0 8px;
    gap: 2px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    user-select: none;
    z-index: 2;
}

.stratus-pdf2-btn[b-3p3re9l4qa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mud-palette-appbar-text);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.stratus-pdf2-btn:hover:not(:disabled)[b-3p3re9l4qa] {
    background: rgba(255, 255, 255, 0.12);
}
.stratus-pdf2-btn:active:not(:disabled)[b-3p3re9l4qa] {
    background: rgba(255, 255, 255, 0.2);
}
.stratus-pdf2-btn:disabled[b-3p3re9l4qa] {
    opacity: 0.35;
    cursor: default;
}
.stratus-pdf2-btn-active[b-3p3re9l4qa] {
    background: rgba(255, 255, 255, 0.2) !important;
    outline: 1px solid rgba(255, 255, 255, 0.3);
}

.stratus-pdf2-separator[b-3p3re9l4qa] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
    flex-shrink: 0;
}

.stratus-pdf2-page-info[b-3p3re9l4qa] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
}

.stratus-pdf2-page-input[b-3p3re9l4qa] {
    width: 40px;
    height: 26px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-appbar-text);
    font-family: inherit;
    outline: none;
}
.stratus-pdf2-page-input:focus[b-3p3re9l4qa] {
    border-color: var(--mud-palette-primary);
    background: rgba(255, 255, 255, 0.12);
}
.stratus-pdf2-page-input[b-3p3re9l4qa]::-webkit-inner-spin-button,
.stratus-pdf2-page-input[b-3p3re9l4qa]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stratus-pdf2-page-input[type=number][b-3p3re9l4qa] {
    -moz-appearance: textfield;
}

.stratus-pdf2-page-count[b-3p3re9l4qa] {
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.stratus-pdf2-zoom-input[b-3p3re9l4qa] {
    width: 52px;
    height: 26px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0 2px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-appbar-text);
    font-family: inherit;
    outline: none;
}
.stratus-pdf2-zoom-input:focus[b-3p3re9l4qa] {
    border-color: var(--mud-palette-primary);
    background: rgba(255, 255, 255, 0.12);
}

.stratus-pdf2-title[b-3p3re9l4qa] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    margin-left: 8px;
}

.stratus-pdf2-spacer[b-3p3re9l4qa] {
    flex: 1;
}

/* ---- iframe ---- */
.stratus-pdf2-iframe[b-3p3re9l4qa] {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
}

/* ---- Loading ---- */
.stratus-pdf2-loading[b-3p3re9l4qa] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--mud-palette-text-secondary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
}

.stratus-pdf2-spinner[b-3p3re9l4qa] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--mud-palette-lines-default);
    border-top: 3px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: stratus-pdf2-spin-b-3p3re9l4qa 0.8s linear infinite;
}
@keyframes stratus-pdf2-spin-b-3p3re9l4qa { to { transform: rotate(360deg); } }

/* ---- Error ---- */
.stratus-pdf2-error[b-3p3re9l4qa] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: var(--mud-palette-error);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ---- Explicit dark override (component may still toggle this class) ----
   The base styles are already theme-reactive via palette tokens; this deepens the
   container background when the component explicitly requests dark chrome. */
.stratus-pdf2-dark[b-3p3re9l4qa] {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-default);
}

/* ---- Light theme ---- */
.stratus-pdf2-light[b-3p3re9l4qa] {
    /* Base tokens already handle light; nothing extra needed. */
}
/* /Components/Components/PickingManager/Dashboard/PickerKpiDashboard.razor.rz.scp.css */
/* Picker KPI leaderboard — custom 4-column grid (name + Tasks + Active hrs + Rate).
   The Tasks column stacks TWO bars per picker (pieces + expedites); the Rate
   column stacks TWO bars (pieces/hr + exp/hr). Each bar carries its value+unit
   as an absolutely-positioned overlay inside the bar track, with theme-aware
   contrast (solid white + multi-layer dark halo via text-shadow). */

.pk-leaderboard[b-63gehu8apz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One row in the leaderboard: 5 cells (name + 4 metric columns). The shared row
   layout keeps each picker's bars aligned across all metric columns. Name col
   is wide enough to accommodate avatar + name + status pill + role icon. */
.pk-row[b-63gehu8apz] {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(4, 2fr);
    column-gap: 24px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.pk-row:hover[b-63gehu8apz] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Header row — uppercase tracking + bottom border, no hover. */
.pk-leaderboard-header[b-63gehu8apz] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 4px;
}
.pk-leaderboard-header:hover[b-63gehu8apz] {
    background-color: transparent;
}

.pk-cell[b-63gehu8apz] {
    min-width: 0;
    overflow: hidden;
}

/* Name column — avatar + name + status pill + role icon, left-aligned with gap. */
.pk-cell-name[b-63gehu8apz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Name shrinks first; status/role indicators are fixed-size and stay legible. */
.pk-name-text[b-63gehu8apz] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

.pk-status-pill[b-63gehu8apz] {
    flex: 0 0 auto;
}

.pk-role-icon[b-63gehu8apz] {
    flex: 0 0 auto;
    opacity: 0.85;
}

/* Metric cell — the track is the whole cell (or a vertical stack of two tracks
   for the Tasks + Rate columns); value lives inside each track. */
.pk-metric[b-63gehu8apz] {
    display: flex;
    align-items: center;
}

/* Stacked-bars wrapper for the Tasks and Rate columns (pieces+expedites,
   pc/hr+exp/hr). Each child track is the same height as the single-bar cells
   so the overall row height stays predictable. */
.pk-metric-stack[b-63gehu8apz] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The rail behind the fill bar — full-width, subtle gray. position: relative so
   the value overlay can be absolutely positioned inside. */
.pk-bar-track[b-63gehu8apz] {
    flex: 1 1 auto;
    width: 100%;
    height: 22px;
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 11px;
    overflow: hidden;
    position: relative;
}

/* The fill — colored, rounded ends, slight inner highlight. min-width keeps a
   tiny tick visible even at value 0 so the row reads as "picker N exists but
   didn't contribute on this metric." */
.pk-bar[b-63gehu8apz] {
    height: 100%;
    border-radius: 11px;
    min-width: 4px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Per-metric gradients — each metric gets its own hue so the eye can identify
   "what am I looking at" without reading labels. Pieces and pieces/hr share
   their hue family (primary / info); expedites and expedites/hr share theirs
   (warning amber / success green) to visually pair the count + rate of the
   same work type. */
.pk-bar-pieces[b-63gehu8apz] {
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
}
.pk-bar-hours[b-63gehu8apz] {
    background: linear-gradient(90deg, var(--mud-palette-secondary), var(--mud-palette-secondary-lighten));
}
.pk-bar-rate[b-63gehu8apz] {
    background: linear-gradient(90deg, var(--mud-palette-info), var(--mud-palette-info-lighten));
}
.pk-bar-expedites[b-63gehu8apz] {
    background: linear-gradient(90deg, var(--mud-palette-warning), var(--mud-palette-warning-lighten));
}
.pk-bar-exp-rate[b-63gehu8apz] {
    background: linear-gradient(90deg, var(--mud-palette-success), var(--mud-palette-success-lighten));
}
/* Earned hours pair (count + rate) — vivid magenta/pink hex codes rather than
   a palette variable because the EH metric needs to be eye-catching across
   themes and the MudBlazor tertiary palette either isn't defined or rendered
   washed out in our theme. Material Pink 500 (#e91e63) family — distinct from
   primary blue, secondary purple, info cyan, warning amber, success green. */
.pk-bar-earned[b-63gehu8apz] {
    background: linear-gradient(90deg, #e91e63, #f06292);
}
.pk-bar-eh-rate[b-63gehu8apz] {
    background: linear-gradient(90deg, #ad1457, #e91e63);
}

/* Numeric value + unit overlay — absolutely positioned inside the bar track at
   the right edge. Solid white text with a multi-layer dark halo gives strong,
   theme-independent contrast on BOTH the colored bar fill AND the lighter grey
   rail when the bar is short. */
.pk-bar-value-overlay[b-63gehu8apz] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.9),
        0 0 6px rgba(0, 0, 0, 0.55),
        0 1px 1px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
}

/* Unit suffix — smaller + slightly de-emphasized so the number stays dominant. */
.pk-bar-unit[b-63gehu8apz] {
    margin-left: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
}

/* ─── Status timeline strip (under the Active hrs bar) ────────────────────────
   One thin rail per picker; colored spans are absolutely positioned by
   percentage against the SHARED scale (earliest→latest Active time across all
   shown rows), so the strips align vertically. Colors reuse the status-pill
   hues (Active=success, Idle=info, Paused=warning); Stopped renders as a gap —
   the rail showing through IS the "not working" signal. Solid fills only: they
   stay vector in print and read quietly under the big gradient bar. */
.pk-tl-track[b-63gehu8apz] {
    position: relative;
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background-color: var(--mud-palette-action-default-hover);
    overflow: hidden;
}

.pk-tl-seg[b-63gehu8apz] {
    position: absolute;
    top: 0;
    bottom: 0;
}

.pk-tl-active[b-63gehu8apz] { background-color: var(--mud-palette-success); }
.pk-tl-idle[b-63gehu8apz]   { background-color: var(--mud-palette-info); }
.pk-tl-paused[b-63gehu8apz] { background-color: var(--mud-palette-warning); }

/* Hour gridlines — translucent so one tick color reads on the bare rail AND on
   top of any segment fill, in both themes. Rendered after the segments. */
.pk-tl-tick[b-63gehu8apz] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(128, 128, 128, 0.45);
    pointer-events: none;   /* never steal hover from the segment tooltips */
}

/* Sparse timestamp axis under each strip. Labels are centered on their tick
   (translateX(-50%)); edge-adjacent labels are dropped in code so nothing
   clips against the cell bounds. */
.pk-tl-axis[b-63gehu8apz] {
    position: relative;
    height: 10px;
    width: 100%;
    margin-top: -2px;   /* tuck under the strip; the stack's gap alone reads detached */
}

.pk-tl-axis-label[b-63gehu8apz] {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.58rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Scale extents in the "Active hrs" header cell — the two times sit at the
   column edges the strips span. Undo the header row's uppercase/tracking so
   "6:04 AM" doesn't inherit letter-spacing. */
.pk-tl-scale[b-63gehu8apz] {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

/* Legend under the leaderboard — swatches reuse the segment color classes. */
.pk-tl-legend[b-63gehu8apz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* Legend entries are hoverable (title tooltips explain each status) — the
   help cursor is the affordance that there's more to read. */
.pk-tl-legend-item[b-63gehu8apz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.pk-tl-key[b-63gehu8apz] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.pk-tl-legend-note[b-63gehu8apz] {
    margin-left: 8px;
    cursor: help;
}

/* ─── Intraday "over the day" chart ──────────────────────────────────────────
   Sits inside the print root, below the leaderboard, separated by a rule rather
   than its own card so it reads as part of the same picture. */
.pk-series-section[b-63gehu8apz] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.pk-series-header[b-63gehu8apz] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* The metric toggle sits on its own row here so it gets the SAME 720px the 14-day
   chart's toggle gets (rather than sharing a row and being squeezed to the point of
   ellipsizing every label). Same width, same look — it just isn't competing for space. */
.pk-series-section .pk-metric-toggle[b-63gehu8apz]  .mud-button-group-root {
    flex-wrap: nowrap;
}

/* ─── Per-bar hover panel ────────────────────────────────────────────────────
   Rendered through MudBlazor's popover provider, so these rules are NOT scoped
   to this component's markup — hence ::deep on the popover class, and the panel's
   own internals are styled in PickerMetricHoverChart.razor.css. */
[b-63gehu8apz] .pk-hover-popover {
    /* Sits above the bar it belongs to; the provider positions it, we only need
       it to stop stealing the cursor (a panel under the pointer would re-enter
       the bar and flicker). */
    pointer-events: none;
}

/* Metric-toggle wrapper — stretches to fill remaining width on narrow viewports
   so the 5 buttons become equal-width (flex: 1 each) with ellipsis-truncated
   labels. On wide viewports the max-width cap keeps the buttons from getting
   absurdly wide.
   ::deep is required for scoped CSS to penetrate MudBlazor's compiled markup —
   the inner .mud-button-group-root / .mud-button-root / .mud-button-label
   classes are rendered without this component's scope attribute, so scoped
   selectors alone wouldn't match them. */
.pk-metric-toggle[b-63gehu8apz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.pk-metric-toggle[b-63gehu8apz]  .mud-button-group-root {
    width: 100%;
    max-width: 720px;       /* room for 7 buttons (was 540px for 5) */
    display: flex;
}

.pk-metric-toggle[b-63gehu8apz]  .mud-button-root {
    flex: 1 1 0;
    min-width: 0;            /* override MudButton's default 64px min-width so it can shrink */
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
}

.pk-metric-toggle[b-63gehu8apz]  .mud-button-label,
.pk-metric-toggle[b-63gehu8apz]  .mud-button-root > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* The 14-day chart now renders via the shared StratusChart (Chart.js) component — it fills the card width and
   owns its own height/axis titles, so the old rotated-label grid hack is gone. */

/* Narrower screens — preserve the shared-row invariant but trim non-essential
   spacing. Below 600px the grid still works; the bars compress proportionally.
   Stacked bars get slightly shorter to fit two in the same vertical envelope. */
/* ─── Daily totals — Production Control's three-row aggregate table ─────── */
/* Three rows (Pieces / Expedites / Earned hrs), one column per day in the
   14-day window, aggregated across whatever the group filter scopes to.
   Horizontal scroll lets the table grow as long as it needs without forcing
   the parent card to bulge; the first column (metric label) is sticky so the
   row identity stays anchored while the user scrolls right. */

.pk-totals-filter[b-63gehu8apz] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;       /* wrap chips onto a second line if many groups picked */
}

.pk-totals-filter-label[b-63gehu8apz] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.pk-totals-scroll[b-63gehu8apz] {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

.pk-totals-grid[b-63gehu8apz] {
    display: grid;
    /* grid-template-columns set inline (depends on day count). */
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    min-width: max-content;            /* force horizontal scroll instead of squish */
}

.pk-totals-cell[b-63gehu8apz] {
    padding: 8px 10px;
    border-right: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Strip the right border on the rightmost column and the bottom border on
   the last row — purely visual cleanup so the table doesn't double-border
   itself against its container. Columns = day count + 1 (label), so the
   rightmost cell is at position (column_count) within each row. Since the
   grid template is set inline with the day count, we can't predict the exact
   nth-child stride; use last-of-row / last-row classes set in the razor
   markup instead if needed. For now the outer border on the grid contains
   the doubling visually. */

/* Sticky first column — metric label stays visible during horizontal scroll. */
.pk-totals-corner[b-63gehu8apz],
.pk-totals-label[b-63gehu8apz] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    text-align: left;
    font-weight: 600;
    box-shadow: 1px 0 0 var(--mud-palette-divider);
}

.pk-totals-day-header[b-63gehu8apz] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

/* Today's column tinted so the eye anchors on "now" without having to
   read the date. Same hover-tint pattern used by the leaderboard rows. */
.pk-totals-today[b-63gehu8apz] {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-text-primary);
}
.pk-totals-day-header.pk-totals-today[b-63gehu8apz] {
    font-weight: 700;
}

@media (max-width: 600px) {
    .pk-row[b-63gehu8apz] {
        grid-template-columns: minmax(180px, 1fr) repeat(4, 1.4fr);
        column-gap: 12px;
        padding: 4px;
    }
    .pk-bar-track[b-63gehu8apz] {
        height: 18px;
    }
    .pk-tl-track[b-63gehu8apz] {
        height: 5px;
    }
    .pk-metric-stack[b-63gehu8apz] {
        gap: 3px;
    }
    .pk-bar-value-overlay[b-63gehu8apz] {
        right: 6px;
        font-size: 0.75rem;
    }
    .pk-bar-unit[b-63gehu8apz] {
        font-size: 0.65rem;
    }
    .pk-name-text[b-63gehu8apz] {
        font-size: 0.8rem;
    }
}
/* /Components/Components/PickingManager/Dashboard/PickerMetricHoverChart.razor.rz.scp.css */
/* Hover panel shown above a picker's metric bar. Rendered through MudBlazor's popover provider,
   so it can't inherit anything from the leaderboard — every value it needs is set here. */

.pk-hover-card[b-dg5zwm32un] {
    width: 320px;
    padding: 10px 12px 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.pk-hover-head[b-dg5zwm32un] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pk-hover-name[b-dg5zwm32un] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-hover-metric[b-dg5zwm32un] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex: 0 0 auto;
}

/* The number the bar itself shows — repeated so the panel is anchored to what was hovered. */
.pk-hover-total[b-dg5zwm32un] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.pk-hover-unit[b-dg5zwm32un] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pk-hover-total-caption[b-dg5zwm32un] {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}

.pk-hover-foot[b-dg5zwm32un] {
    margin-top: 2px;
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* /Components/Components/PickingManager/ProductionControl/PickingSchedulePage.razor.rz.scp.css */
/* Below MudBlazor's Md breakpoint (959.98px), the header buttons collapse to
   icon-only variants — the 60px min-height that matches the sidebar drawer
   becomes unnecessary slack. Drop it so the header shrinks to whatever the
   collapsed controls need. */
@media (max-width: 959.98px) {
    .pc-page-header[b-buq4uxmtiy] {
        min-height: 0 !important;
        padding: 6px 12px !important;
    }
}
/* /Components/Components/PickingManager/ProductionControl/ScheduleView.razor.rz.scp.css */
/* Excel-like palette adapted from IdeaStoreList.razor.css. Key difference: this
   grid does NOT use alternating row stripes — the schedule's tier tinting
   (applied via RowStyleFunc on the row) provides the visual banding. Hover
   uses !important so it overrides the inline tier-tint background per cell.

   Wrapped in ::deep because .picking-schedule-grid lives on the MudDataGrid's
   rendered root, not on an element this component owns directly. */

/* Toolbar above the grid: wraps onto multiple rows when the viewport is too
   narrow for the search + counts-bar combo. */
[b-cc8nzy6k9l] .picking-schedule-toolbar {
    flex-wrap: wrap;
    row-gap: 4px;
}

[b-cc8nzy6k9l] .picking-schedule-tier-chips {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Mobile (under MudBlazor's Md breakpoint at 960px) — give the tier-chip row its
   own line under the search/clear-filters group, and drop chips for tiers that
   have no rows to match. Keeps the toolbar from stacking into 3+ tall rows on
   phone widths. */
@media (max-width: 959.98px) {
    [b-cc8nzy6k9l] .picking-schedule-tier-chips {
        flex-basis: 100%;
        order: 2;
    }

    [b-cc8nzy6k9l] .picking-schedule-tier-chips .tier-zero {
        display: none;
    }
}

[b-cc8nzy6k9l] .picking-schedule-grid {
    --ps-grid-header-bg:        var(--mud-palette-background-grey);        /* sheet-header */
    --ps-grid-header-border:    var(--mud-palette-lines-default);         /* divider */
    --ps-grid-header-hover-bg:  rgba(var(--mud-palette-primary-rgb), 0.08); /* slightly darker on hover */
    --ps-grid-header-text:      var(--mud-palette-text-primary);
    --ps-grid-row-hover-bg:     rgba(var(--mud-palette-primary-rgb), 0.10); /* selection tint */
    --ps-grid-cell-border:      var(--mud-palette-lines-default);         /* sheet gridline */
    --ps-grid-input-bg:         var(--mud-palette-surface);
}

/* --- Header cell ---------------------------------------------------------- */

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-table-cell {
    background-color: var(--ps-grid-header-bg);
    border-bottom: 1.5px solid var(--ps-grid-header-border);
    color: var(--ps-grid-header-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: none;
    vertical-align: top;
}

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-table-cell:hover {
    background-color: var(--ps-grid-header-hover-bg);
}

/* Stack title + filter controls vertically inside the column header */
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
    width: 100%;
}

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .sortable-column-header {
    align-items: center;
    color: var(--ps-grid-header-text);
    display: flex;
    font-weight: 600;
    gap: 4px;
    width: 100%;
    word-break: break-word;
    white-space: normal;
}

/* Sort indicator: dim until active. */
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .sort-direction-icon {
    font-size: 0.9rem;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 120ms ease;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .sort-direction-icon.mud-direction-asc,
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .sort-direction-icon.mud-direction-desc {
    color: var(--ps-grid-header-text);
    opacity: 1;
}

/* Per-column filter / options row: always visible, compact. */
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .column-options {
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    margin-top: 1px;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
}

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .column-options .mud-button-root,
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .column-options .mud-icon-button {
    opacity: 0.6;
    transition: opacity 120ms ease, background-color 120ms ease;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell:hover .column-header .column-options .mud-button-root,
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell:hover .column-header .column-options .mud-icon-button,
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .column-options .mud-button-root:hover,
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell .column-header .column-options .mud-icon-button:hover {
    opacity: 1;
}

/* MudDataGrid Simple filter inline TextField — compact Excel-cell-like input. */
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-input-control {
    margin-top: 0;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-input-control .mud-input.mud-input-text {
    background-color: var(--ps-grid-input-bg);
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 2px;
    min-height: 22px;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-input-control .mud-input.mud-input-text input {
    padding: 2px 6px;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-input-control .mud-input.mud-input-text > .mud-input-adornment {
    height: 22px;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-input-control .mud-input-label {
    display: none;
}

/* --- Body rows + cells ---------------------------------------------------
   NO alternating-row stripe — tier tinting via RowStyleFunc provides banding.
   Hover overlays use !important so the at-rest tier-tint inline style is
   superseded only during hover. */

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--ps-grid-cell-border);
}

[b-cc8nzy6k9l] .picking-schedule-grid.mud-table-bordered .mud-table-cell {
    border-right: 1px solid var(--ps-grid-cell-border);
}

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-body .mud-table-row:hover > .mud-table-cell {
    background-color: var(--ps-grid-row-hover-bg) !important;
}

/* --- Cell alignment ------------------------------------------------------
   Default to center for Excel-spreadsheet feel. The Item column carries
   freeform text (item + description) and opts out via `col-left` on its
   CellClass + HeaderClass. */

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-body .mud-table-cell {
    text-align: center;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-body .mud-table-cell .d-flex {
    justify-content: center;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .sortable-column-header {
    justify-content: center;
}

[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell.col-left {
    text-align: left;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-cell.col-left .d-flex {
    justify-content: flex-start;
}
[b-cc8nzy6k9l] .picking-schedule-grid .mud-table-head .mud-table-cell.col-left .sortable-column-header {
    justify-content: flex-start;
}

/* Em-dash placeholder for empty cell values (Red Bag, Material, Dept). Muted so it
   reads as "no data" instead of competing with real values. Same pattern as the
   drilldown dialog's .wc-drilldown-dash. */
[b-cc8nzy6k9l] .picking-schedule-dash {
    color: var(--mud-palette-text-disabled);
    font-size: 1rem;
    line-height: 1;
}
/* /Components/Components/PickingManager/ProductionControl/WorkcenterDrilldownDialog.razor.rz.scp.css */
/* ─── Drilldown table polish ─────────────────────────────────────────────────
   Scoped styles applied via Class="wc-drilldown-table" on the MudTable root.
   MudBlazor's internals (thead/tbody/td/th) need ::deep to be reached from a
   scoped CSS file. */

[b-4l267ap0br] .wc-drilldown-table {
    font-size: 0.8125rem;
    line-height: 1.25;
}

/* Sticky header — subtle tint + bottom-shadow so it visually separates from the
   scroll region when FixedHeader pins it. */
[b-4l267ap0br] .wc-drilldown-table thead th {
    background-color: var(--mud-palette-background-grey, #f5f5f5);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    box-shadow: inset 0 -1px 0 var(--mud-palette-divider);
}

[b-4l267ap0br] .wc-drilldown-table tbody td {
    padding: 4px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--mud-palette-table-lines, var(--mud-palette-divider)) !important;
}

/* Row hover — slightly stronger than MudBlazor's default so the row tracks the
   cursor when scanning long lists. */
[b-4l267ap0br] .wc-drilldown-table tbody tr:hover td {
    background-color: var(--mud-palette-action-hover) !important;
}

/* Numeric / center / mono column classes. Applied to both <th> and <td> so the
   header and cell alignment stay in lock-step. */
[b-4l267ap0br] .wc-drilldown-num   { text-align: right; font-variant-numeric: tabular-nums; }
[b-4l267ap0br] .wc-drilldown-center { text-align: center; }

[b-4l267ap0br] .wc-drilldown-mono {
    font-family: var(--mud-typography-default-family),
                 ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Priority cell — accent-weight so the operator's eye lands on it first. */
[b-4l267ap0br] .wc-drilldown-priority {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Em-dash placeholder for empty cells. Muted so it reads as "no data" instead
   of competing with real values. */
[b-4l267ap0br] .wc-drilldown-dash {
    color: var(--mud-palette-text-disabled);
    font-size: 1rem;
    line-height: 1;
}

/* Tight chips — MudChip default vertical margin pushes row height up; collapse it. */
[b-4l267ap0br] .wc-drilldown-table .mud-chip {
    margin: 0;
    height: 22px;
}
/* /Components/Components/PickingManager/ProductionControl/WorkcenterLoadPage.razor.rz.scp.css */
/* Below MudBlazor's Md breakpoint (959.98px), the header buttons collapse to
   icon-only variants — the 60px min-height that matches the sidebar drawer
   becomes unnecessary slack. Drop it so the header shrinks to whatever the
   collapsed controls need. */
@media (max-width: 959.98px) {
    .pc-page-header[b-zngklhyni6] {
        min-height: 0 !important;
        padding: 6px 12px !important;
    }
}
/* /Components/Components/PickingManager/ProductionControl/WorkcenterStagingGantt.razor.rz.scp.css */
.wc-gantt[b-jv0p6yi95d] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    user-select: none;
}

.wc-gantt-labels[b-jv0p6yi95d] {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-gantt-row-label[b-jv0p6yi95d] {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* The tracks column is the slider's coordinate space — relative positioning */
.wc-gantt-tracks[b-jv0p6yi95d] {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Padding-top reserves room for the slider handle that sits above the first track */
    padding-top: 14px;
    margin-top: -14px;
}

.wc-gantt-track[b-jv0p6yi95d] {
    position: relative;
    height: 24px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.wc-gantt-bar[b-jv0p6yi95d] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
    overflow: hidden;
    white-space: nowrap;
}

.wc-gantt-bar:hover[b-jv0p6yi95d] {
    filter: brightness(1.15);
}

/* Transparent left-spacer used to offset the Active row */
.wc-gantt-bar-spacer[b-jv0p6yi95d] {
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.wc-gantt-bar-staged[b-jv0p6yi95d]       { background-color: var(--mud-palette-success); } /* green — picked & ready */
.wc-gantt-bar-active[b-jv0p6yi95d]       { background-color: var(--mud-palette-info); }    /* blue — in progress */
.wc-gantt-bar-queue[b-jv0p6yi95d]        { background-color: #9e9e9e; }                    /* neutral grey — queued (data-viz) */

/* Overflow indicator — anchored to the right edge when a row exceeds the global scale.
   Surfaces "+Xh" / "+N jobs" so operators see how far over the ceiling that row is.
   Clickable so it acts as a fallback drilldown target when the entire bar is pushed
   off-screen by the overflow — no `pointer-events: none` and `cursor: pointer`. */
.wc-gantt-overflow[b-jv0p6yi95d] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #c62828;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 0 4px rgba(198, 40, 40, 0.6);
    z-index: 3;
    transition: filter 0.1s ease-in-out;
}

.wc-gantt-overflow:hover[b-jv0p6yi95d] {
    filter: brightness(1.15);
}

.wc-gantt-overflow[b-jv0p6yi95d]::before {
    content: "▶ ";
}

/* Zero-hours indicator — appears on the Hours view when a row has jobs (count > 0)
   but zero standard hours (so no bar segment would render). Anchored to the left edge
   like the bar would start; clickable and tooltip-bearing so the operator can still
   drill in. Visually neutral — operators shouldn't confuse it with the red overflow
   chip. */
.wc-gantt-zerobar[b-jv0p6yi95d] {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px dashed var(--mud-palette-text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    z-index: 3;
    transition: background-color 0.1s ease-in-out;
}

.wc-gantt-zerobar:hover[b-jv0p6yi95d] {
    background-color: var(--mud-palette-action-default-hover);
}

.wc-gantt-bar-staged-short[b-jv0p6yi95d],
.wc-gantt-bar-active-short[b-jv0p6yi95d] {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 4px,
        transparent 4px,
        transparent 8px
    );
}

.wc-gantt-bar-staged-short[b-jv0p6yi95d] { background-color: #ff9800; }
.wc-gantt-bar-active-short[b-jv0p6yi95d] { background-color: #ef6c00; }

.wc-gantt-axis-row[b-jv0p6yi95d] {
    position: relative;
    height: 14px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.wc-gantt-tick-label[b-jv0p6yi95d] {
    position: absolute;
    top: 0;
    white-space: nowrap;
    line-height: 14px;
    pointer-events: none;
}

/* First tick (value 0) sits flush against the left edge; last tick (the max) flush
   against the right edge so the units label never gets clipped. Interior ticks are
   centered on their value. */
.wc-gantt-tick-label-start[b-jv0p6yi95d] { transform: translateX(0); }
.wc-gantt-tick-label-mid[b-jv0p6yi95d]   { transform: translateX(-50%); }
.wc-gantt-tick-label-end[b-jv0p6yi95d]   { transform: translateX(-100%); }

/* Interior axis guide-line. Sits behind the bars (z-index 2 < sliders' 5)
   and stops short of the axis row so it doesn't visually run into the labels. */
.wc-gantt-tick-line[b-jv0p6yi95d] {
    position: absolute;
    top: 14px;            /* below the slider-handle reserve */
    bottom: 18px;         /* same clearance as the sliders */
    width: 0;
    pointer-events: none;
    z-index: 2;
    transform: translateX(-1px);
}

.wc-gantt-tick-line[b-jv0p6yi95d]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: var(--mud-palette-divider);
    opacity: 0.7;
}

.wc-gantt-axis-label[b-jv0p6yi95d] { height: 18px; }

/* ─── Sliders — vertical line with a single value-pill drag handle at the bottom.
   The pill IS the drag affordance (no separate knob): line + pill together visually
   "I-shape" the slider while keeping the chart's content area uncluttered. The pill
   sits at the bottom-center of the line, anchored just below the axis tick labels
   so the value stays readable. ─── */
.wc-gantt-slider[b-jv0p6yi95d] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    pointer-events: none;
    z-index: 5;
    transform: translateX(-1px);
}

/* Hit area along the line — wider than the visible line so dragging is forgiving.
   Stops at the pill so the two hit zones don't double-cover. */
.wc-gantt-slider[b-jv0p6yi95d]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 18px;
    left: -6px;
    width: 14px;
    pointer-events: auto;
    cursor: ew-resize;
}

/* Visible line — stops just above the pill so they read as connected. */
.wc-gantt-slider[b-jv0p6yi95d]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 16px;
    left: 0;
    width: 2px;
    pointer-events: none;
}

.wc-gantt-slider-target[b-jv0p6yi95d]::after  { background-color: #d32f2f; box-shadow: 0 0 4px rgba(211, 47, 47, 0.5); }
.wc-gantt-slider-minjobs[b-jv0p6yi95d]::after { background-color: #6a1b9a; box-shadow: 0 0 4px rgba(106, 27, 154, 0.5); }

/* Value pill — centered on the slider's vertical line, anchored at the bottom of
   the tracks container. Slight elevation + bold weight communicate "draggable".
   z-index 6 keeps it above the tick labels in the axis row. */
.wc-gantt-slider-handle[b-jv0p6yi95d] {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px;
    text-align: center;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: white;
    white-space: nowrap;
    pointer-events: auto;
    cursor: ew-resize;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    user-select: none;
    z-index: 6;
    transition: filter 0.1s ease-in-out;
}

.wc-gantt-slider-handle:hover[b-jv0p6yi95d] {
    filter: brightness(1.1);
}

.wc-gantt-slider-target  .wc-gantt-slider-handle[b-jv0p6yi95d] { background-color: #d32f2f; }
.wc-gantt-slider-minjobs .wc-gantt-slider-handle[b-jv0p6yi95d] { background-color: #6a1b9a; }

/* Read-only view (user lacks workcenterstagingtargeteditor) — desaturate the pill
   and swap the resize cursor for a plain not-allowed so the affordance reads
   "you can SEE the value but can't drag it." Hover-brightness override removes
   the interactive feedback. */
.wc-gantt-slider-handle-readonly[b-jv0p6yi95d] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.4);
}

.wc-gantt-slider-handle-readonly:hover[b-jv0p6yi95d] {
    filter: grayscale(0.4);
}
/* /Components/Components/ProductionSchedule/Dialogs/CatalogComponentsDialog.razor.rz.scp.css */
/* Parts dialog: one table per operation, so the grouping is visible as structure rather than as a
   column somebody has to read down. */

.ps-parts-head[b-1ncv3lvpcp] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-parts-count[b-1ncv3lvpcp] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.ps-parts-table[b-1ncv3lvpcp] {
    overflow-x: auto;
}

.ps-parts-table table[b-1ncv3lvpcp] {
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 1180px;
    width: 100%;
}

.ps-parts-table th[b-1ncv3lvpcp] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
}

.ps-parts-table td[b-1ncv3lvpcp] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 7px 10px;
    vertical-align: middle;
}

.ps-parts-table tbody tr:last-child td[b-1ncv3lvpcp] {
    border-bottom: 0;
}

.ps-parts-table tbody tr:hover td[b-1ncv3lvpcp] {
    background: var(--mud-palette-action-default-hover);
}

/* Quantities line up so they can be compared down the column without reading each one. */
.ps-parts-table .num[b-1ncv3lvpcp] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.ps-parts-table .desc[b-1ncv3lvpcp] {
    color: var(--mud-palette-text-primary);
    max-width: 320px;
}

.ps-parts-table .sub[b-1ncv3lvpcp] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    margin-left: 4px;
}

.ps-parts-table .sub.tag[b-1ncv3lvpcp] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    letter-spacing: 0.04em;
    padding: 0 3px;
}

/* A part that needs picking and has nothing on the shelf is the thing people came to find. */
.ps-parts-table tr.is-short td[b-1ncv3lvpcp] {
    background: rgba(var(--mud-palette-warning-rgb), 0.07);
}

.ps-parts-table tr.is-short:hover td[b-1ncv3lvpcp] {
    background: rgba(var(--mud-palette-warning-rgb), 0.13);
}

/* Filter strip: search first, then the quick filters, matching the main grid so the interaction only
   has to be learned once. */
.ps-parts-filters[b-1ncv3lvpcp] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ps-parts-filter-label[b-1ncv3lvpcp] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* /Components/Components/ProductionSchedule/Dialogs/MoOperationsDialog.razor.rz.scp.css */

/* A finished operation is context, not work. It has to be VISIBLE — omitting these is the bug this
   dialog just fixed — but it should not compete with the operations that are still live. */
tr.is-finished td[b-7e4qx6nqvk] {
    color: var(--mud-palette-text-secondary);
}

tr.is-finished td strong[b-7e4qx6nqvk] {
    font-weight: 500;
}
/* /Components/Components/ProductionSchedule/Dialogs/RowReasonsDialog.razor.rz.scp.css */
/* The answer, set apart from the evidence below it. A left rail rather than a box: the point is that
   this is the lead, not that it is an alert — alerts are what the discrepancy section underneath uses,
   and two boxed treatments stacked would read as two warnings. */

.ps-headline[b-vn9uuikif8] {
    border-left: 3px solid var(--mud-palette-primary);
    padding: 2px 0 2px 12px;
}

.ps-headline-lead[b-vn9uuikif8] {
    font-weight: 500;
    line-height: 1.45;
}

.ps-headline-because[b-vn9uuikif8] {
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Picking's own words for this row — a component, a count, a token — kept distinct from the general
   explanation above it. */
.ps-headline-detail[b-vn9uuikif8] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin-top: 2px;
}
/* /Components/Components/PurchaseSpendFile/PurchaseSpendReportSection.razor.rz.scp.css */
.psf-section[b-u72l9ydr9b] {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.psf-criteria[b-u72l9ydr9b] {
    flex: none;
}

.psf-search[b-u72l9ydr9b] {
    max-width: 260px;
}

/* The grid fills the remaining space; its row area scrolls internally while the
   toolbar and pager stay pinned, so the pager is always visible without scrolling
   the page. Mirrors the flex-fill pattern used by the Invoice grid. */
.psf-grid[b-u72l9ydr9b] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.psf-grid[b-u72l9ydr9b]  .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Components/Shared/StratusChart.razor.rz.scp.css */
/* Generic Chart.js chart wrapper. The canvas block is sized (height/width set inline from parameters) because
   Chart.js reads its parent's box when responsive + maintainAspectRatio:false. */

.stratus-chart[b-co3tj0m1dt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Optional chrome row (download button), right-aligned above the canvas. */
.stratus-chart-header[b-co3tj0m1dt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.stratus-chart-canvas[b-co3tj0m1dt] {
    min-width: 0;
}

/* Fallback shown by the ErrorBoundary if Chart.js can't render the config. */
.stratus-chart-error[b-co3tj0m1dt] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Components/SortableList.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/

[b-xb7yppfblw] .sortable-ghost {
    visibility: hidden;
}

[b-xb7yppfblw] .sortable-fallback {
    opacity: 1 !important
}
/* /Components/Components/StratusNotification.razor.rz.scp.css */
.notification:hover[b-ep0g3i6flc] {
    cursor: pointer;
}

.close-button[b-ep0g3i6flc] {
    transform: translate(5px, -8px);
}
/* /Components/Components/StratusNotificationContainer.razor.rz.scp.css */
/* /Components/Components/WorkCenterIdleTimes/WorkCenterIdleTimesSettingsDialog.razor.rz.scp.css */
/* Refresh-interval picker — soft Surface list items on the dialog, with a primary
   accent on the active choice (WingMate selected-state direction). Bootstrap's
   .list-group is not globally themed, and it is only used here, so it is scoped. */
.list-group-item[b-wnqwwv3lai] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.list-group-item-action:hover:not(.active)[b-wnqwwv3lai] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-text-primary);
}

.list-group-item.active[b-wnqwwv3lai] {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
/* /Components/Dialogs/AccountSettingsDialog.razor.rz.scp.css */
/* Scoped to this dialog only (::deep reaches the MudExpansionPanels child DOM under the
   .account-settings-panels anchor). Gives each panel a distinct bordered-card look so it
   separates from the dialog's Surface background instead of blending in — without touching
   the global MudExpansionPanels styling used elsewhere in the app. */

/* Drop the container's own card/elevation; let each panel be its own card. */
.account-settings-panels[b-kk9h5vpqqz]  .mud-expansion-panels {
    background-color: transparent;
    box-shadow: none;
}

.account-settings-panels[b-kk9h5vpqqz]  .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px !important;
    margin-bottom: 10px;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

.account-settings-panels[b-kk9h5vpqqz]  .mud-expand-panel:last-child {
    margin-bottom: 0;
}

/* Tint the header so collapsed panels read as defined bars against the dialog surface. */
.account-settings-panels[b-kk9h5vpqqz]  .mud-expand-panel-header {
    background-color: var(--mud-palette-background-grey);
}
/* /Components/Dialogs/AiSearchConfigurationDialog.razor.rz.scp.css */
/* AI Search Configuration Dialog Styles */

[b-4t535fdvym] .mud-dialog {
    border-radius: 12px;
}

[b-4t535fdvym] .mud-dialog-content {
    padding: 0;
}

[b-4t535fdvym] .mud-tabs .mud-tab-panel {
    padding: 24px;
}

[b-4t535fdvym] .mud-slider-track {
    height: 6px;
    border-radius: 3px;
}

[b-4t535fdvym] .mud-slider-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[b-4t535fdvym] .mud-slider-thumb:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

[b-4t535fdvym] .mud-select {
    margin-top: 8px;
}

[b-4t535fdvym] .mud-input-control {
    margin-top: 8px;
}

.preset-buttons[b-4t535fdvym] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

[b-4t535fdvym] .mud-button-group .mud-button {
    border-radius: 8px;
    text-transform: none;
    font-weight: 500;
}

[b-4t535fdvym] .mud-paper {
    border-radius: 8px;
}

[b-4t535fdvym] .mud-tooltip {
    font-size: 0.875rem;
    max-width: 250px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-4t535fdvym] .mud-tabs .mud-tab-panel {
        padding: 16px;
    }
    
    .preset-buttons[b-4t535fdvym] {
        justify-content: center;
    }
    
    [b-4t535fdvym] .mud-button-group {
        width: 100%;
    }
    
    [b-4t535fdvym] .mud-button-group .mud-button {
        flex: 1;
        min-width: 0;
    }
}

/* Animation for sliders */
[b-4t535fdvym] .mud-slider {
    transition: all 0.2s ease;
}

[b-4t535fdvym] .mud-slider:hover {
    transform: translateY(-1px);
}

/* Custom styling for different slider types */
[b-4t535fdvym] .mud-slider.mud-color-primary .mud-slider-track-fill {
    background: linear-gradient(90deg, var(--mud-palette-primary-lighten), var(--mud-palette-primary));
}

[b-4t535fdvym] .mud-slider.mud-color-secondary .mud-slider-track-fill {
    background: linear-gradient(90deg, var(--mud-palette-secondary-lighten), var(--mud-palette-secondary));
}

[b-4t535fdvym] .mud-slider.mud-color-warning .mud-slider-track-fill {
    background: linear-gradient(90deg, var(--mud-palette-warning-lighten), var(--mud-palette-warning));
}

[b-4t535fdvym] .mud-slider.mud-color-info .mud-slider-track-fill {
    background: linear-gradient(90deg, var(--mud-palette-info-lighten), var(--mud-palette-info));
}

[b-4t535fdvym] .mud-slider.mud-color-success .mud-slider-track-fill {
    background: linear-gradient(90deg, var(--mud-palette-success-lighten), var(--mud-palette-success));
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
            text-decoration: underline;
        }

        .top-row ::deep a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

        .top-row ::deep a, .top-row ::deep .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth ::deep a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
*/
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item ::deep .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;*/

        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}*/
/* /Components/Layout/NotificationDrawer.razor.rz.scp.css */
.conversation-name[b-icde7qfbeu] {
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
}

.conversation-recipients[b-icde7qfbeu] {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.last-message-sender[b-icde7qfbeu] {
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
}

.last-message[b-icde7qfbeu] {
    font-size: 13px;
    font-style: italic;
    font-weight: 300;
}
/* /Components/Layout/PaneTabStrip.razor.rz.scp.css */
/* A pane's tab strip in split view (env#329): a fixed-height row above its pane in the split grid (SplitGeometry.PaneStripPx). The
   tabs keep the shell strip's look (app.css: .tab-strip-wrapper, .main-body-tabs). */
.pane-strip[b-t037lfsz7u] {
    height: 34px;
    min-width: 0;
    overflow: hidden;
    /* The line between a strip's tabs and its pane: always there; the pane you're working in has it in the accent colour. */
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.pane-strip.pane-strip-focused[b-t037lfsz7u] {
    border-bottom-color: var(--mud-palette-primary);
}

/* Side by side: both strips in the first row, over their panes' columns. Stacked: each strip above its pane. */
.pane-strip-side-by-side.pane-strip-first[b-t037lfsz7u] { grid-column: 1; grid-row: 1; }
.pane-strip-side-by-side.pane-strip-second[b-t037lfsz7u] { grid-column: 3; grid-row: 1; }
.pane-strip-stacked.pane-strip-first[b-t037lfsz7u] { grid-column: 1; grid-row: 1; }
.pane-strip-stacked.pane-strip-second[b-t037lfsz7u] { grid-column: 1; grid-row: 4; }

/* The strip's list scrolls sideways when its tabs don't fit (Shift+wheel, or the thin bar). */
[b-t037lfsz7u] .pane-tab-list {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
/* /Components/Pages/MainContent.razor.rz.scp.css */
.tab-content-visible[b-ii1wujuozm] {
    visibility: visible;
    position: relative;
    height: auto;
    width: 100%;
    /* z-index: 1; */
}

.tab-content-hidden[b-ii1wujuozm] {
    visibility: hidden;
    position: absolute;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}

/* ── Split view (env#329) ──────────────────────────────────────────────────────────────────────────────────────────────────
   Single view: the host is a plain block, so nothing above changes. Split view: MainContent sets the grid's height and tracks
   inline (two shares and the divider); each pane's tab sits in its track and scrolls on its own; background tabs stay hidden (no size,
   so they land in implicit rows of no height). The divider is SplitDivider in the middle track; each pane's strip is PaneTabStrip, above it. */
.split-host[b-ii1wujuozm] {
    display: grid;
    overflow: hidden;
}

/* Each pane under its strip (PaneTabStrip): side by side, strips in row 1 and panes in row 2; stacked, strip, pane, divider, strip, pane. */
.split-host.split-side-by-side > .split-pane-first[b-ii1wujuozm] { grid-column: 1; grid-row: 2; }
.split-host.split-side-by-side > .split-pane-second[b-ii1wujuozm] { grid-column: 3; grid-row: 2; }
.split-host.split-stacked > .split-pane-first[b-ii1wujuozm] { grid-row: 2; grid-column: 1; }
.split-host.split-stacked > .split-pane-second[b-ii1wujuozm] { grid-row: 5; grid-column: 1; }

.split-host > .split-pane[b-ii1wujuozm] {
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    overflow: auto;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 120ms ease-in;
}

/* The CUI overlay is placed in its tab's div, and a pane scrolls, so it would move off the content with the scroll. While it's up the pane
   doesn't scroll at all: clip, not hidden, so a pane already scrolled goes back to its origin too, and the overlay covers what's on screen. */
.split-host > .split-pane:has(> .blackout-overlay)[b-ii1wujuozm] {
    overflow: clip;
}

/* The focused pane: the one reload, Ctrl+Q and tours act on. */
.split-host > .split-pane.split-pane-focused[b-ii1wujuozm] {
    outline-color: var(--mud-palette-primary);
}

/* While a tab is dragged (MainTabs.razor.js), the content on screen (iframes too) mustn't take the pointer. Single view as well: a tab
   can be dragged to an edge over Nysus. */
.tab-content-host.tab-dragging > .tab-content-visible[b-ii1wujuozm] {
    pointer-events: none;
}

/* While the divider is dragged, the panes (iframes too) mustn't take the pointer or select text. */
.split-host.split-dragging > .split-pane[b-ii1wujuozm] {
    pointer-events: none;
    user-select: none;
}
/* /Components/ScannerComponents/Apps/PickingApp/Dialogs/DrawingViewerDialog.razor.rz.scp.css */
.dvd-viewport[b-cdl5iwhn99] {
    position: fixed;
    inset: 0;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
    touch-action: none;
}

/* Float the Stratus toolbar as an overlay so the iframe fills the whole viewport. */
.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-toolbar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 9998;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    min-height: 0;
}

.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-title,
.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-spacer,
.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-separator {
    display: none;
}

/* Match the close button (MudIconButton Size=Large): ~48px tap target,
   icon ~24px. The inner SVG is sized 18px in StratusPdfViewer markup; we
   override it via the child selector. */
.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-toolbar .stratus-pdf2-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.54);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-toolbar .stratus-pdf2-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.dvd-viewport[b-cdl5iwhn99]  .stratus-pdf2-toolbar .stratus-pdf2-btn svg {
    width: 24px;
    height: 24px;
}
/* /Components/ScannerComponents/Apps/PickingApp/Dialogs/MapViewerDialog.razor.rz.scp.css */
/* Map host that fills the entire viewport. Used in tandem with an inline
   style="top:0; left:0; width:100vw; height:100vh;" so the size + position
   land outside the .razor.css scope boundary (no ::deep needed) and reliably
   bypass whatever padding MudDialog's content area would apply. */
.mv-fs-map[b-79qgpzgx3v] {
    position: fixed;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

/* Floating no-coords warning pill. Inline position:fixed in the razor so
   it lives outside the dialog's scroll/clip area; this rule provides the
   pill's visual styling. */
.mv-fs-warning[b-79qgpzgx3v] {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.mv-fs-warning-sep[b-79qgpzgx3v] {
    opacity: 0.7;
}
/* /Components/ScannerComponents/Apps/PickingApp/Dialogs/PickerStatisticsDialog.razor.rz.scp.css */
/* Scanner statistics dialog — no MudPaper cards, hand-rolled CSS bar charts.
   MudChart was producing thin bars and tiny axis labels on the phone-narrow
   scanner viewport; this gives precise control over bar width, font sizes, and
   chart chrome. Sections are separated by MudDivider; the whole layout is a
   single vertical column. */

.stats-root[b-xpi47os5yh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px 4px;
    min-height: 100%;
}

.stats-section[b-xpi47os5yh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-section-heading[b-xpi47os5yh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.01em;
}

/* ─── Totals (replaces the old MudPaper card) ───────────────────────────── */

.stats-totals[b-xpi47os5yh] {
    gap: 6px;
}

.stats-total-row[b-xpi47os5yh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2px 0;
}

.stats-total-label[b-xpi47os5yh] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.stats-total-value[b-xpi47os5yh] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}

/* Tint the rate/expedite totals so users can scan-find them at a glance —
   colors match the corresponding chart bar fills below. */
.stats-total-rate[b-xpi47os5yh]     { color: var(--mud-palette-info); }
.stats-total-exp[b-xpi47os5yh]      { color: var(--mud-palette-warning); }
.stats-total-exp-rate[b-xpi47os5yh] { color: var(--mud-palette-success); }
/* Vivid magenta — matches the dashboard's EH gradient. Tertiary palette was
   washed out / undefined; pink stands apart from every other metric color. */
.stats-total-earned[b-xpi47os5yh]   { color: #e91e63; }
.stats-total-eh-rate[b-xpi47os5yh]  { color: #f06292; }

/* Unit suffix on the large totals — sits inline after the big number, smaller
   and slightly de-emphasized so the digits stay dominant. */
.stats-unit[b-xpi47os5yh] {
    margin-left: 6px;
    font-size: 0.65em;
    font-weight: 500;
    opacity: 0.7;
}

/* ─── Metric toggle ─────────────────────────────────────────────────────── */
/* Stretches to fill the dialog width so the 5 buttons become equal-width with
   ellipsis-truncated labels on narrow phone screens.
   ::deep is required for scoped CSS to penetrate MudBlazor's compiled markup —
   the inner .mud-button-group-root / .mud-button-root / .mud-button-label
   classes are rendered without the parent's scope attribute, so scoped
   selectors alone wouldn't match them. */
.stats-toggle[b-xpi47os5yh] {
    width: 100%;
}

.stats-toggle[b-xpi47os5yh]  .mud-button-group-root {
    width: 100%;
    display: flex;
    max-width: none;
}

.stats-toggle[b-xpi47os5yh]  .mud-button-root {
    flex: 1 1 0;
    min-width: 0;            /* override MudButton's default 64px min-width so it can shrink */
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
}

/* The button's inner span holds the text — apply ellipsis HERE (not on the
   button itself) so the truncation happens cleanly without affecting button
   chrome / ripple positioning. */
.stats-toggle[b-xpi47os5yh]  .mud-button-label,
.stats-toggle[b-xpi47os5yh]  .mud-button-root > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Two-row variant — stacks two button groups vertically so 7 buttons can
   render across two rows of ~3-4 each instead of ellipsis-truncating into
   illegibility on phone-narrow viewports. Each row independently honors the
   stretch-and-truncate rules above via the row group's flex sizing. */
.stats-toggle-2row[b-xpi47os5yh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.stats-toggle-2row[b-xpi47os5yh]  .mud-button-group-root {
    width: 100%;
    display: flex;
    max-width: none;
}

.stats-toggle-2row[b-xpi47os5yh]  .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
}

.stats-toggle-2row[b-xpi47os5yh]  .mud-button-label,
.stats-toggle-2row[b-xpi47os5yh]  .mud-button-root > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ─── Custom CSS bar chart ──────────────────────────────────────────────── */
/* Vertical bars: value above, fill in the middle, label below. Bars sit on a
   shared baseline (track is flex-end aligned) so heights compare visually. */

.stats-chart[b-xpi47os5yh] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 2px;
}

.stats-bar-col[b-xpi47os5yh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* Hourly chart — fixed-width bars so even 24 of them stay legible; horizontal
   scroll kicks in when the trimmed range still doesn't fit on the phone. */
.stats-chart-hourly .stats-bar-col[b-xpi47os5yh] {
    flex: 0 0 30px;
}

/* Weekly chart — only 7 bars, let them grow to fill the row but cap so they
   don't get cartoonishly wide on a tablet. */
.stats-chart-weekly .stats-bar-col[b-xpi47os5yh] {
    flex: 1 1 0;
    min-width: 36px;
    max-width: 64px;
}

.stats-bar-value[b-xpi47os5yh] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
}

.stats-bar-track[b-xpi47os5yh] {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
}

.stats-bar-fill[b-xpi47os5yh] {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Per-metric fills — gradient matches the manager dashboard so users see a
   consistent color identity for each metric across both surfaces. */
.stats-bar-fill-pieces[b-xpi47os5yh] {
    background: linear-gradient(180deg, var(--mud-palette-primary-lighten), var(--mud-palette-primary));
}
.stats-bar-fill-hours[b-xpi47os5yh] {
    background: linear-gradient(180deg, var(--mud-palette-secondary-lighten), var(--mud-palette-secondary));
}
.stats-bar-fill-rate[b-xpi47os5yh] {
    background: linear-gradient(180deg, var(--mud-palette-info-lighten), var(--mud-palette-info));
}
.stats-bar-fill-expedites[b-xpi47os5yh] {
    background: linear-gradient(180deg, var(--mud-palette-warning-lighten), var(--mud-palette-warning));
}
.stats-bar-fill-exp-rate[b-xpi47os5yh] {
    background: linear-gradient(180deg, var(--mud-palette-success-lighten), var(--mud-palette-success));
}
/* Earned hours + EH/hr — vivid magenta family (Material Pink 500). Distinct
   from every other metric color and high-contrast on both light and dark
   themes. Matches the dashboard's EH gradient. */
.stats-bar-fill-earned[b-xpi47os5yh] {
    background: linear-gradient(180deg, #f06292, #e91e63);
}
.stats-bar-fill-eh-rate[b-xpi47os5yh] {
    background: linear-gradient(180deg, #f06292, #ad1457);
}

.stats-bar-label[b-xpi47os5yh] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    /* Reserve space even when empty — the hourly chart shows labels only on
       hour boundaries, but every column still needs the same vertical
       footprint or unlabeled columns let the bar slide down by ~14px. */
    min-height: 0.8rem;
}

.stats-empty[b-xpi47os5yh] {
    padding: 16px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    text-align: center;
}
/* /Components/ScannerComponents/Apps/PickingApp/PickingAppStatusBar.razor.rz.scp.css */
.picking-status-bar[b-31ysgai81b] {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--mud-palette-background-grey);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Note: Responsive .chip-text styles moved to global app.css 
   to avoid CSS isolation issues with child components */
/* /Components/ScannerComponents/Apps/PickingApp/Sheets/EmptyBinsSheet.razor.rz.scp.css */
.bins-sheet[b-ymbrp7av8y] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1031; /* Above action bar (1030) */
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sheet States */
.bins-sheet.closed[b-ymbrp7av8y] {
    transform: translateY(100%);
}

.bins-sheet.peek[b-ymbrp7av8y] {
    transform: translateY(calc(100% - 200px));
    height: 200px;
}

.bins-sheet.open[b-ymbrp7av8y] {
    transform: translateY(0);
    top: 64px; /* Start just below status bar */
    height: auto;
    max-height: calc(100vh - 64px); /* Fill from status bar to bottom */
}

/* Handle Bar */
.sheet-handle[b-ymbrp7av8y] {
    padding: 12px;
    display: flex;
    justify-content: center;
    cursor: grab;
}

.handle-bar[b-ymbrp7av8y] {
    width: 40px;
    height: 4px;
    background: var(--mud-palette-lines-default);
    border-radius: 2px;
}

/* Header */
.sheet-header[b-ymbrp7av8y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Content */
.sheet-content[b-ymbrp7av8y] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Bin Cards */
.bin-card[b-ymbrp7av8y] {
    min-height: 44px; /* Touch-friendly */
}

/* Responsive */
@media (min-width: 768px) {
    .bins-sheet[b-ymbrp7av8y] {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
    }
    
    .bins-sheet.peek[b-ymbrp7av8y] {
        transform: translateX(-50%) translateY(calc(100% - 200px));
    }
    
    .bins-sheet.open[b-ymbrp7av8y] {
        transform: translateX(-50%) translateY(0);
    }
}
/* /Components/ScannerComponents/Layout/ScannersLayout.razor.rz.scp.css */
/* 
 * Note: Pull-to-refresh prevention moved to global app.css
 * because isolated CSS doesn't work on html/body elements
 */
/* /Components/ScannerComponents/Shared/ScannerAppCard.razor.rz.scp.css */
.scanner-app-card-wrapper[b-91wf6gczuq] {
    width: 100%;
    /* Height is set dynamically by JavaScript */
}

.scanner-app-card[b-91wf6gczuq] {
    cursor: pointer;
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: 100%;
}

.scanner-app-card:active[b-91wf6gczuq] {
    transform: scale(0.98);
}

.app-icon[b-91wf6gczuq] {
    width: var(--icon-size, 56px);
    height: var(--icon-size, 56px);
    object-fit: contain;
}

.app-icon-material[b-91wf6gczuq] {
    font-size: var(--icon-size, 56px) !important;
    width: var(--icon-size, 56px);
    height: var(--icon-size, 56px);
}

[b-91wf6gczuq] .app-name {
    font-size: var(--text-size, 16px) !important;
}
/* /Components/ScannerComponents/Shared/ScannerButton.razor.rz.scp.css */
.scanner-button[b-hqw9kc7jqd] {
    min-height: 56px;
    font-size: 1.1rem;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* /Components/ScannerComponents/Shared/ScannerInput.razor.rz.scp.css */
.scanner-input[b-gzo743jdph] {
    font-size: 1.1rem;
}
/* /Components/Shared/AgentActivity.razor.rz.scp.css */
.agent-activity[b-5jr6l7okhh] {
    font-size: 0.8rem;
}

.activity-step[b-5jr6l7okhh] {
    margin-bottom: 0.4rem;
}

.activity-step-head[b-5jr6l7okhh] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
}

.activity-step-label[b-5jr6l7okhh] {
    font-weight: 500;
}

.activity-step-error .activity-step-label[b-5jr6l7okhh] {
    color: var(--mud-palette-error);
}

/* Details inline, formatted; long tool output scrolls instead of needing its own expander. */
.activity-step-detail[b-5jr6l7okhh] {
    margin: 2px 0 0 24px;
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/GuidedTour/GuidedTourHost.razor.rz.scp.css */
/* Guided-tour layer. z-index: overlay 1350, card 1360 (TourStepCard) — above the app bar / temporary drawers (1300), popovers (1200),
   offcanvas (1045) and the blackout (1000, inside the tab); below dialogs (1400+), snackbars, tooltips, the reconnect modal and the
   loader. While a Dialog-scoped step (or a Centered step inside a dialog excursion) shows, JS sets data-gt-layer="dialog" on the root
   and the layer lifts to 1450 / 1451 / 1460: above the dialog container's stacking context (1400; overlay 1401, .mud-dialog 1402) and
   a popover inside a dialog (1403), still below snackbars (1500), tooltips (1600+), the reconnect modal and the loader. Only while such
   a step shows (DD-P3-3): an unrelated dialog opened during a page step must paint above the tour until the pause lands. JS owns every
   layer's visibility, the dim path's d and the hole guard / beacon positions (style + data-gt-* only). */

/* Not positioned, so it creates no stacking context: its fixed children layer against the page directly. */
.gt-root[b-cb18oyw1r2] {
    pointer-events: none;
}

.gt-root[data-gt-layer="dialog"] .gt-overlay[b-cb18oyw1r2] {
    z-index: 1450;
}

.gt-root[data-gt-layer="dialog"] .gt-hole-guard[b-cb18oyw1r2],
.gt-root[data-gt-layer="dialog"] .gt-beacon[b-cb18oyw1r2] {
    z-index: 1451;
}

/* The card is TourStepCard's element (.gt-card-pos, 1360 there): ::deep reaches it from this component's root. */
.gt-root[data-gt-layer="dialog"][b-cb18oyw1r2]  .gt-card-pos {
    z-index: 1460;
}

.gt-sr-only[b-cb18oyw1r2] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gt-overlay[b-cb18oyw1r2] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1350;
    pointer-events: none;
    visibility: hidden;
    overflow: visible;
}

/* The dim blocks clicks; clicking it does nothing (OD3). */
.gt-dim[b-cb18oyw1r2] {
    fill: rgba(10, 15, 22, .55);
    pointer-events: auto;
}

html[data-theme="dark"] .gt-root .gt-dim[b-cb18oyw1r2] {
    fill: rgba(0, 0, 0, .65);
}

/* Sits over the hole: draws the ring and (except on DoThis steps, where JS lets clicks through) blocks the spotlighted element. */
.gt-hole-guard[b-cb18oyw1r2] {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 1351;
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), .9), 0 0 0 8px rgba(var(--mud-palette-primary-rgb), .25);
    pointer-events: auto;
    visibility: hidden;
    transition: box-shadow 150ms ease;
}

/* Tip steps don't dim: a pulsing beacon marks the anchor instead. */
.gt-beacon[b-cb18oyw1r2] {
    position: fixed;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    z-index: 1351;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb), .95);
    box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), .5);
    pointer-events: none;
    visibility: hidden;
    animation: gt-beacon-pulse-b-cb18oyw1r2 1.6s ease-out infinite;
}

@keyframes gt-beacon-pulse-b-cb18oyw1r2 {
    0% { box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), .5); }
    70% { box-shadow: 0 0 0 10px rgba(var(--mud-palette-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gt-hole-guard[b-cb18oyw1r2] {
        transition: none;
    }

    .gt-beacon[b-cb18oyw1r2] {
        animation: none;
    }
}
/* /Components/Shared/GuidedTour/TourHelpMenu.razor.rz.scp.css */
/* The "?" sits in AccountComponent's flex row between the bell and the avatar; keep it vertically centred like the bell. */
.tour-help[b-af46ev6z9n] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Screen-reader-only text (the in-menu What's new dot's "(new features)"). */
.tour-help-sr-only[b-af46ev6z9n] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/GuidedTour/TourStepCard.razor.rz.scp.css */
/* The step card. JS places .gt-card-pos (left / top / bottom / right) and sets data-gt-shown / data-gt-side / data-gt-dock; Blazor
   renders data-sheet and data-presentation. Rules for MudBlazor children go through ::deep from an element this component renders. */

.gt-card-pos[b-gfo7cuouqy] {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1360;
    width: max-content;
    max-width: min(360px, calc(100vw - 24px));
    pointer-events: auto;
    visibility: hidden;
    outline: none;
}

/* Sheet mode (phone UA or a tab body < 600 px): full width, docked top or bottom by JS, scrolling body. */
.gt-card-pos[data-sheet="true"][b-gfo7cuouqy] {
    width: auto;
    max-width: none;
    padding: 0 12px;
}

.gt-card-pos[b-gfo7cuouqy]  .gt-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 10px;
    padding: 14px 16px 10px;
    opacity: 0;
    transform: scale(.98);
    transition: opacity 150ms ease, transform 150ms ease;
}

.gt-card-pos[data-gt-shown][b-gfo7cuouqy]  .gt-card {
    opacity: 1;
    transform: none;
}

.gt-card-pos[data-sheet="true"][b-gfo7cuouqy]  .gt-card {
    max-height: 45dvh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    margin: 8px 0;
}

html[data-theme="dark"] .gt-card-pos[b-gfo7cuouqy]  .gt-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
}

.gt-head[b-gfo7cuouqy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.gt-titles[b-gfo7cuouqy] {
    flex: 1 1 auto;
    min-width: 0;
}

.gt-card-pos[b-gfo7cuouqy]  .gt-eyebrow {
    display: block;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.gt-card-pos[b-gfo7cuouqy]  .gt-title {
    font-weight: 600;
    outline: none;
}

.gt-card-pos[b-gfo7cuouqy]  .gt-close {
    margin: -6px -8px 0 0;
}

/* An administrator's preview: a small outlined chip beside the title (never wraps, never shrinks the close button). */
.gt-card-pos[b-gfo7cuouqy]  .gt-preview-chip {
    flex: 0 0 auto;
    margin: 0;
    height: 22px;
}

.gt-body[b-gfo7cuouqy] {
    margin-top: 6px;
    font-size: .925rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.gt-card-pos[data-sheet="true"] .gt-body[b-gfo7cuouqy] {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.gt-progress[b-gfo7cuouqy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

.gt-dots[b-gfo7cuouqy] {
    display: inline-flex;
    gap: 4px;
}

.gt-dot[b-gfo7cuouqy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}

.gt-dot[data-current="true"][b-gfo7cuouqy] {
    background: var(--mud-palette-primary);
}

.gt-card-pos[b-gfo7cuouqy]  .gt-docs {
    display: inline-block;
    margin-top: 8px;
}

.gt-actions[b-gfo7cuouqy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.gt-actions-left[b-gfo7cuouqy],
.gt-actions-right[b-gfo7cuouqy] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gt-actions-right[b-gfo7cuouqy] {
    margin-left: auto;
}

.gt-card-pos[b-gfo7cuouqy]  .gt-action {
    text-transform: none;
}

/* Sheet targets are at least 44 px. */
.gt-card-pos[data-sheet="true"][b-gfo7cuouqy]  .gt-action,
.gt-card-pos[data-sheet="true"][b-gfo7cuouqy]  .gt-close {
    min-height: 44px;
    min-width: 44px;
}

/* The arrow: a rotated square on the edge facing the anchor (data-gt-side = where the card sits); JS sets its offset. */
.gt-arrow[b-gfo7cuouqy] {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--mud-palette-surface);
    transform: rotate(45deg);
    visibility: hidden;
    pointer-events: none;
}

.gt-card-pos[data-gt-side="bottom"] .gt-arrow[b-gfo7cuouqy] {
    top: -6px;
    margin-left: -6px;
}

.gt-card-pos[data-gt-side="top"] .gt-arrow[b-gfo7cuouqy] {
    bottom: -6px;
    margin-left: -6px;
}

.gt-card-pos[data-gt-side="right"] .gt-arrow[b-gfo7cuouqy] {
    left: -6px;
    margin-top: -6px;
}

.gt-card-pos[data-gt-side="left"] .gt-arrow[b-gfo7cuouqy] {
    right: -6px;
    margin-top: -6px;
}

.gt-card-pos[data-gt-side="none"] .gt-arrow[b-gfo7cuouqy] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .gt-card-pos[b-gfo7cuouqy]  .gt-card {
        transition: none;
        transform: none;
    }
}
/* /Components/Shared/MarkdownRenderer.razor.rz.scp.css */
.markdown-content[b-b4tbh78eep] {
    /* Chat-reading rhythm: a little more leading than body copy, and MudBlazor's body letter-spacing reset. */
    line-height: 1.65;
    letter-spacing: normal;
    color: inherit;
    /* Long tokens (an equation typed inline, a URL) break instead of dragging a horizontal scrollbar onto the
       conversation. 'anywhere' (vs 'break-word') also lets the element shrink in a flex/grid parent, so its
       content can never force the column wider. Table cells opt back out (see Tables). */
    overflow-wrap: anywhere;
    min-width: 0;
}

    /* Prose keeps a readable measure (~75 characters a line); tables, code and equations still use the full column. */
    .markdown-content[b-b4tbh78eep]  :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, hr) {
        max-width: 76ch;
    }

    /* ── Headings — chat-sized (Bootstrap's page sizes made an H1 40px), fixed rem so they don't scale with the
       viewport, and more space ABOVE than below so a heading belongs to the section it starts. ── */
    .markdown-content[b-b4tbh78eep]  :is(h1, h2, h3, h4, h5, h6) {
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
        margin: 1.5em 0 0.5em;
        color: var(--mud-palette-text-primary);
    }

    .markdown-content[b-b4tbh78eep]  h1 {
        font-size: 1.375rem;
    }

    .markdown-content[b-b4tbh78eep]  h2 {
        font-size: 1.25rem;
    }

    .markdown-content[b-b4tbh78eep]  h3 {
        font-size: 1.125rem;
    }

    .markdown-content[b-b4tbh78eep]  h4 {
        font-size: 1rem;
    }

    .markdown-content[b-b4tbh78eep]  :is(h5, h6) {
        font-size: 0.875rem;
        color: var(--mud-palette-text-secondary);
    }

    .markdown-content[b-b4tbh78eep]  :is(h1, h2, h3, h4, h5, h6):first-child {
        margin-top: 0;
    }

    /* A heading straight under another heading (or a rule) is a sub-title, not a new section. */
    .markdown-content[b-b4tbh78eep]  :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6),
    .markdown-content[b-b4tbh78eep]  hr + :is(h1, h2, h3, h4) {
        margin-top: 0.5rem;
    }

    /* ── Paragraphs ── */
    .markdown-content[b-b4tbh78eep]  p {
        margin-top: 0;
        margin-bottom: 0.875rem;
    }

    .markdown-content[b-b4tbh78eep]  p:last-child {
        margin-bottom: 0;
    }

    /* A paragraph that is only bold text ("Key points", "Next steps:") is a label for what follows — tag added on
       finalize by MarkdownRenderer.razor.js (CSS can't tell it apart from "**Note:** more text"). */
    .markdown-content[b-b4tbh78eep]  p.md-label {
        margin: 1rem 0 0.25rem;
    }

    .markdown-content[b-b4tbh78eep]  p.md-label:first-child {
        margin-top: 0;
    }

    .markdown-content[b-b4tbh78eep]  p.md-label + :is(ul, ol) {
        margin-top: 0;
    }

    /* ── Lists. During streaming, marked emits "loose" lists (each <li> wraps its text in a <p>); collapse those <p>
       margins so the streaming view matches Markdig's finalized output. ── */
    .markdown-content[b-b4tbh78eep]  ul,
    .markdown-content[b-b4tbh78eep]  ol {
        margin: 0 0 0.875rem;
        padding-left: 1.625rem;
    }

    .markdown-content[b-b4tbh78eep]  li {
        margin: 0;
    }

    .markdown-content[b-b4tbh78eep]  li + li {
        margin-top: 0.375rem;
    }

    .markdown-content[b-b4tbh78eep]  li > p {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* A list item with several paragraphs keeps them apart. */
    .markdown-content[b-b4tbh78eep]  li > p + p {
        margin-top: 0.5rem;
    }

    /* Nested lists shouldn't add their own large top/bottom gap. */
    .markdown-content[b-b4tbh78eep]  li > ul,
    .markdown-content[b-b4tbh78eep]  li > ol {
        margin: 0.375rem 0 0;
    }

    .markdown-content[b-b4tbh78eep]  li::marker {
        color: var(--mud-palette-text-secondary);
    }

    /* Task lists: the checkbox replaces the bullet. */
    .markdown-content[b-b4tbh78eep]  ul.contains-task-list {
        list-style: none;
        padding-left: 0.25rem;
    }

    .markdown-content[b-b4tbh78eep]  .task-list-item input[type="checkbox"] {
        margin: 0 0.5rem 0 0;
        vertical-align: -2px;
        accent-color: var(--mud-palette-primary);
    }

    /* ── Blockquote, rule, links, images ── */
    .markdown-content[b-b4tbh78eep]  blockquote {
        margin: 0 0 0.875rem;
        padding: 0.5rem 1rem;
        font-size: inherit;
        color: var(--mud-palette-text-secondary);
        border-left: 3px solid var(--mud-palette-primary);
        background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
        border-radius: 0 6px 6px 0;
    }

    .markdown-content[b-b4tbh78eep]  blockquote > :last-child {
        margin-bottom: 0;
    }

    .markdown-content[b-b4tbh78eep]  hr {
        border: 0;
        border-top: 1px solid var(--mud-palette-lines-default, var(--mud-palette-divider));
        opacity: 1;
        margin: 1.5rem 0;
    }

    .markdown-content[b-b4tbh78eep]  a {
        text-decoration-thickness: 1px;
        text-underline-offset: 0.15em;
    }

    .markdown-content[b-b4tbh78eep]  img {
        max-width: 100%;
        height: auto;
    }

    /* Inline code only (not inside pre blocks) — a tint of the text colour, so it reads in both themes. */
    .markdown-content[b-b4tbh78eep]  :not(pre) > code {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
        color: var(--mud-palette-text-primary);
        padding: 0.125em 0.375em;
        border-radius: 4px;
        font-size: 0.875em;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
        overflow-wrap: anywhere;   /* a long inline-code expression wraps rather than overflowing the bubble */
    }

    /* Code block wrapper + copy button base styles live in wwwroot/css/app.css (UNSCOPED); the header bar below is
       MarkdownRenderer-only. */

    /* Fenced code blocks — kept dark in both themes to match the globally-loaded highlight.js github-dark syntax
       theme (light code blocks would need a per-theme highlight stylesheet swap). Inline code and body text remain
       theme-reactive. */
    .markdown-content[b-b4tbh78eep]  pre {
        background-color: #0d1117;
        color: #e6edf3;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 0.875rem 1rem;
        overflow-x: auto;
        margin-bottom: 0;
        max-width: 100%;
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .markdown-content[b-b4tbh78eep]  pre code {
        background-color: transparent;
        color: #e6edf3;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
        white-space: pre-wrap;   /* streaming: no header bar yet, so wrap rather than scroll under nothing */
        overflow-x: auto;
    }

    /* Finalized blocks get a header bar (language + copy — addCodeCopyButtons), so long lines SCROLL instead of
       wrapping, and the copy button never covers code. */
    .markdown-content[b-b4tbh78eep]  .code-block-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 34px;
        padding: 0 6px 0 12px;
        background-color: #161b22;
        color: rgba(230, 237, 243, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
        font-size: 0.75rem;
        line-height: 1;
    }

    .markdown-content[b-b4tbh78eep]  .code-block-header .code-copy-btn {
        position: static;
        float: none;
        width: 28px;
        height: 28px;
        margin: 0;
    }

    .markdown-content[b-b4tbh78eep]  .code-block-wrapper.has-header pre {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .markdown-content[b-b4tbh78eep]  .code-block-wrapper.has-header pre code {
        white-space: pre;
        overflow-wrap: normal;
    }

    /* Dark theme: lift the block off the page (#0d1117 nearly matched the dark page background). */
    html[data-theme="dark"] .markdown-content[b-b4tbh78eep]  pre {
        background-color: #0a0e13;
        border-color: var(--mud-palette-lines-inputs);
    }

    html[data-theme="dark"] .markdown-content[b-b4tbh78eep]  .code-block-header {
        background-color: #1b222c;
        border-color: var(--mud-palette-lines-inputs);
    }

    /* ── Tables — theme-reactive in both themes, sized to their content, scrolling inside their own box. ── */
    .markdown-content[b-b4tbh78eep]  table {
        /* Streaming render: the table is its own scroll box (finalize wraps it in .md-table-scroll instead). */
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: 0 0 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--mud-palette-text-primary);
        background-color: transparent;
    }

    .markdown-content[b-b4tbh78eep]  .md-table-scroll {
        max-width: 100%;
        overflow-x: auto;
        margin: 0 0 1rem;
    }

    .markdown-content[b-b4tbh78eep]  .md-table-scroll > table {
        display: table;
        max-width: none;
        overflow: visible;
        margin: 0;
    }

    .markdown-content[b-b4tbh78eep]  table th,
    .markdown-content[b-b4tbh78eep]  table td {
        padding: 0.5rem 0.75rem;
        text-align: left;
        vertical-align: top;
        border: 1px solid var(--mud-palette-lines-default, var(--mud-palette-divider));
        color: var(--mud-palette-text-primary);
        /* The root's 'anywhere' makes every character a break point when columns are sized, which squeezed columns
           down to one letter; 'break-word' only breaks a token that would actually overflow. */
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 20rem;
    }

    .markdown-content[b-b4tbh78eep]  table th {
        background-color: var(--mud-palette-background-gray);
        font-weight: 600;
    }

    .markdown-content[b-b4tbh78eep]  table tbody tr:nth-child(even) td {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    }

    /* MathJax output. A long equation is rendered math and can't reliably line-wrap, so CONTAIN it: cap at the
       content width and let it scroll INSIDE its own box instead of widening the whole conversation (the app rule —
       wide content scrolls in its own container; the column never scrolls sideways). This is what keeps a giant
       formula from adding a horizontal scrollbar to the chat, and it degrades cleanly on mobile (a narrow, swipeable
       equation box). overflow-y is hidden so the horizontal scrollbar never induces a vertical one. */
    .markdown-content[b-b4tbh78eep]  mjx-container {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

        /* Display equations ($$…$$ / \[…\]) are their own block — give the scrollbar a little breathing room so it
           doesn't clip the equation's descenders. */
        .markdown-content[b-b4tbh78eep]  mjx-container[display="true"] {
            padding-bottom: 3px;
        }

    /* Hover "copy as image" button on a DISPLAY equation. Anchored to the equation's host span (NOT the inner
       mjx-container, which scrolls) so it stays pinned while a wide equation scrolls. Theme-aware; kept faintly
       visible on touch devices that have no hover. */
    .markdown-content[b-b4tbh78eep]  .math-copy-host {
        /* Lay the equation and its copy button in a centered ROW, so the button sits just to the RIGHT of the
           equation (never overlapping it) and reserves its own space — it can't push the column wider. */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
        margin: 1em 0;   /* vertical spacing, relocated from the mjx-container (zeroed below) */
    }

        /* The equation is the flex item that scrolls when wide; drop MathJax's own vertical margin (now on the host)
           so the button lines up with the equation's true top edge. */
        .markdown-content[b-b4tbh78eep]  .math-copy-host > mjx-container {
            min-width: 0;
            margin-top: 0;
            margin-bottom: 0;
        }

    .markdown-content[b-b4tbh78eep]  .math-copy-btn {
        flex: 0 0 auto;          /* a fixed-size item to the right of the equation, not an overlay */
        align-self: flex-start;  /* top-right of the equation */
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        line-height: 1;
        border: 1px solid var(--mud-palette-lines-default, var(--mud-palette-divider));
        border-radius: 6px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s, color 0.15s, background 0.15s;
    }

    .markdown-content[b-b4tbh78eep]  .math-copy-host:hover .math-copy-btn {
        opacity: 0.9;
    }

    .markdown-content[b-b4tbh78eep]  .math-copy-btn:hover {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-background-gray);
    }

    .markdown-content[b-b4tbh78eep]  .math-copy-btn.copied {
        color: var(--mud-palette-success);
        opacity: 1;
    }

    @media (hover: none) {
        .markdown-content[b-b4tbh78eep]  .math-copy-btn {
            opacity: 0.6;   /* no hover on touch — keep it reachable */
        }
    }
/* /Components/Shared/ReportIssue/ReportIssueDialog.razor.rz.scp.css */
/* The details preview and the manual-send text: exactly what's sent, monospaced, wrapped (never a sideways scroll on a phone, never
   wider than its column) and capped in height (a longer block scrolls inside the box, not the dialog). */
.report-issue-preview[b-0t018w4l2v] {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 240px;
    overflow-y: auto;
}
/* /Components/Shared/SharePointFilePicker/SharePointFilePickerDialog.razor.rz.scp.css */
/* SharePoint picker. Mud component roots keep MudBlazor's own scope — style them via ::deep from an element of ours. */

.sp-picker[b-ck07lwbr5w] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    /* Capped by the viewport (title + footer + dialog margins ≈ 200px) so the dialog itself never scrolls — only the list does. */
    height: min(72vh, 760px);
    max-height: calc(100dvh - 200px);
    min-height: min(420px, calc(100dvh - 200px));
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Full-screen dialog: the dialog content is a flex column (ContentStyle in the .razor), so the picker fills whatever the
   title bar and the footer leave — no fixed height, so a taller footer (Folder mode's "Save to:" line) can't push it into scrolling. */
.sp-picker--mobile[b-ck07lwbr5w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
}

/* ── Rail ── */
.sp-rail[b-ck07lwbr5w] {
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 8px 4px;
    overflow-y: auto;
}

.sp-rail-tabs[b-ck07lwbr5w] {
    flex-shrink: 0;
    padding: 8px 12px 4px;
    overflow-x: auto;
}

/* Hugs the toggle group, so only a tap on a tab (not the strip's padding) counts as a re-click of the selected rail. */
.sp-rail-strip[b-ck07lwbr5w] {
    display: inline-flex;
}

.sp-rail-tabs[b-ck07lwbr5w]  .mud-toggle-group {
    min-width: max-content;
}

/* ── Main column ── */
.sp-main[b-ck07lwbr5w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

.sp-search-row[b-ck07lwbr5w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    flex-shrink: 0;
}

.sp-search-row[b-ck07lwbr5w]  .sp-search {
    flex: 1 1 auto;
    margin: 0;
}

.sp-search-row[b-ck07lwbr5w]  .sp-scope {
    flex-shrink: 0;
}

.sp-search-row[b-ck07lwbr5w]  .sp-search-contents {
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
}

/* Empty search results: "Search everywhere" + "Include file contents" side by side. */
.sp-state-actions[b-ck07lwbr5w] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sp-picker--mobile .sp-search-row[b-ck07lwbr5w] {
    flex-wrap: wrap;
}

.sp-main[b-ck07lwbr5w]  .sp-breadcrumbs {
    padding: 2px 12px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sp-crumb[b-ck07lwbr5w] {
    white-space: nowrap;
}

.sp-crumb--current[b-ck07lwbr5w] {
    font-weight: 600;
}

.sp-search-caption[b-ck07lwbr5w] {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.sp-toolbar[b-ck07lwbr5w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.sp-toolbar[b-ck07lwbr5w]  .sp-filter {
    max-width: 260px;
    margin: 0;
}

.sp-hidden-hint[b-ck07lwbr5w] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Rows ── */
.sp-list[b-ck07lwbr5w] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    outline: none;
}

.sp-row[b-ck07lwbr5w] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 110px 150px 80px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    font-size: 0.875rem;
    outline: none;
}

.sp-row--mobile[b-ck07lwbr5w],
.sp-picker--mobile .sp-row--skeleton[b-ck07lwbr5w] {
    grid-template-columns: 32px minmax(0, 1fr);
}

.sp-row--header[b-ck07lwbr5w] {
    height: 32px;
    cursor: default;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.sp-row--skeleton[b-ck07lwbr5w] {
    height: 44px;
    cursor: default;
}

.sp-row:not(.sp-row--header):not(.sp-row--skeleton):hover[b-ck07lwbr5w] {
    background: var(--mud-palette-action-default-hover);
}

.sp-row--active[b-ck07lwbr5w],
.sp-row:focus-visible[b-ck07lwbr5w] {
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.sp-row--selected[b-ck07lwbr5w] {
    background: var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.08));
}

.sp-row--disabled[b-ck07lwbr5w] {
    cursor: default;
    color: var(--mud-palette-text-disabled);
}

.sp-col-check[b-ck07lwbr5w] {
    display: inline-flex;
    justify-content: center;
}

.sp-col-name[b-ck07lwbr5w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sp-name-block[b-ck07lwbr5w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sp-name[b-ck07lwbr5w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search results: the typed words marked in the name, and where the file lives under it. */
.sp-match[b-ck07lwbr5w] {
    padding: 0;
    border-radius: 2px;
    background: rgba(255, 193, 7, 0.32);   /* translucent amber: readable on light and dark surfaces */
    color: inherit;
    font-weight: 600;
}

.sp-location[b-ck07lwbr5w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.sp-reason[b-ck07lwbr5w],
.sp-reference-hint[b-ck07lwbr5w],
.sp-mobile-meta[b-ck07lwbr5w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.sp-reference-hint[b-ck07lwbr5w] {
    color: var(--mud-palette-warning-darken);
}

.sp-cui[b-ck07lwbr5w] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.12));
}

.sp-col-name[b-ck07lwbr5w]  .sp-chevron {
    flex-shrink: 0;
    opacity: .5;
}

.sp-col-modified[b-ck07lwbr5w],
.sp-col-by[b-ck07lwbr5w],
.sp-col-size[b-ck07lwbr5w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.sp-col-size[b-ck07lwbr5w] {
    text-align: right;
}

.sp-load-more[b-ck07lwbr5w] {
    display: flex;
    justify-content: center;
    padding: 8px;
}

/* ── States ── */
.sp-state[b-ck07lwbr5w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Selection tray ── */
.sp-tray[b-ck07lwbr5w] {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-tray[b-ck07lwbr5w]  .mud-chip {
    flex-shrink: 0;
    margin: 0;
}

.sp-tray-name[b-ck07lwbr5w] {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ── Footer ── */
.sp-actions[b-ck07lwbr5w] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sp-summary[b-ck07lwbr5w] {
    flex: 1 1 auto;
    font-size: 0.875rem;
}

/* Mobile: one sticky full-width confirm bar ("Attach (3)"). */
.sp-actions--mobile[b-ck07lwbr5w] {
    position: sticky;
    bottom: 0;
}

/* ── Folder mode ("Save here") ── */

/* Files are shown for context only: muted, never picked (folders still navigate). */
.sp-row--muted[b-ck07lwbr5w] {
    cursor: default;
    color: var(--mud-palette-text-disabled);
}

.sp-row--muted[b-ck07lwbr5w]  .mud-icon-root {
    opacity: .55;
}

.sp-actions--folder[b-ck07lwbr5w] {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 6px;
}

.sp-folder-summary[b-ck07lwbr5w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
    min-width: 0;
    font-size: 0.875rem;
}

.sp-folder-location[b-ck07lwbr5w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-folder-blocked[b-ck07lwbr5w] {
    font-size: 0.75rem;
    color: var(--mud-palette-warning-darken);
}

.sp-folder-buttons[b-ck07lwbr5w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Mobile: the location reads above one sticky full-width "Save here". */
.sp-actions--folder.sp-actions--mobile[b-ck07lwbr5w] {
    flex-direction: column;
    align-items: stretch;
}

.sp-actions--folder.sp-actions--mobile .sp-folder-buttons[b-ck07lwbr5w] {
    width: 100%;
}

/* In the stacked (column) footer the summary's 260px row basis would become 260px of HEIGHT — size it to its text. */
.sp-actions--folder.sp-actions--mobile .sp-folder-summary[b-ck07lwbr5w] {
    flex: 0 0 auto;
}
/* /Components/Shared/SmartMessageFormatter.razor.rz.scp.css */
.smart-message-content[b-xvyl0xwwu2] {
    line-height: 1.6;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Code blocks */
.smart-message-content .code-block[b-xvyl0xwwu2] {
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.375rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.875rem !important;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.smart-message-content .code-block *[b-xvyl0xwwu2] {
    font-size: inherit !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* JSON blocks */
.smart-message-content .json-block[b-xvyl0xwwu2] {
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 0.375rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.875rem !important;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.smart-message-content .json-block *[b-xvyl0xwwu2] {
    font-size: inherit !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Inline code */
.smart-message-content .inline-code[b-xvyl0xwwu2] {
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-error);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', Consolas, monospace;
}

/* Lists */
.smart-message-content .formatted-list[b-xvyl0xwwu2] {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.smart-message-content .formatted-list li[b-xvyl0xwwu2] {
    margin-bottom: 0.25rem;
}

.smart-message-content .checklist[b-xvyl0xwwu2] {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0;
}

.smart-message-content .checklist-item[b-xvyl0xwwu2] {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.smart-message-content .checkbox[b-xvyl0xwwu2] {
    margin-right: 0.5rem;
    font-family: monospace;
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.smart-message-content .checkbox.checked[b-xvyl0xwwu2] {
    color: var(--mud-palette-success);
}

.smart-message-content .checkbox.checked[b-xvyl0xwwu2]::before {
    content: "☑";
}

/* URLs */
.smart-message-content .formatted-url[b-xvyl0xwwu2] {
    color: var(--mud-palette-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.25);
    word-break: break-all;
    max-width: 100%;
}

.smart-message-content .formatted-url:hover[b-xvyl0xwwu2] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
}

.smart-message-content .formatted-url i[b-xvyl0xwwu2] {
    font-size: 0.875em;
}

/* File paths */
.smart-message-content .file-path[b-xvyl0xwwu2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--mud-palette-background-grey);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.smart-message-content .file-path i[b-xvyl0xwwu2] {
    color: var(--mud-palette-warning);
    font-size: 0.875em;
}

.smart-message-content .file-path code[b-xvyl0xwwu2] {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* Headers */
.smart-message-content h4[b-xvyl0xwwu2],
.smart-message-content h5[b-xvyl0xwwu2],
.smart-message-content h6[b-xvyl0xwwu2] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.smart-message-content h4[b-xvyl0xwwu2] {
    font-size: 1.125rem;
}

.smart-message-content h5[b-xvyl0xwwu2] {
    font-size: 1rem;
}

.smart-message-content h6[b-xvyl0xwwu2] {
    font-size: 0.875rem;
}

/* Horizontal rules */
.smart-message-content hr[b-xvyl0xwwu2] {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1rem 0;
}

/* Basic text formatting */
.smart-message-content strong[b-xvyl0xwwu2] {
    font-weight: 600;
}

.smart-message-content em[b-xvyl0xwwu2] {
    font-style: italic;
}

/* Preserve line breaks */
.smart-message-content[b-xvyl0xwwu2] {
    white-space: pre-wrap;
}
/* /Components/Shared/SplitDivider.razor.rz.scp.css */
/* Split view's divider (env#329): the 6 px middle track of the split host's grid. */
.split-divider[b-r28wqi3cut] {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    outline: none;
    z-index: 2;
}

/* Side by side it runs the full height, past both strips; stacked it sits between the top pane and the bottom pane's strip. */
.split-divider-vertical[b-r28wqi3cut] { cursor: col-resize; grid-column: 2; grid-row: 1 / span 2; }
.split-divider-horizontal[b-r28wqi3cut] { cursor: row-resize; grid-row: 3; grid-column: 1; }

/* A wider invisible grab area either side of the 6 px bar. */
.split-divider[b-r28wqi3cut]::before {
    content: "";
    position: absolute;
    inset: 0;
}
.split-divider-vertical[b-r28wqi3cut]::before { left: -4px; right: -4px; }
.split-divider-horizontal[b-r28wqi3cut]::before { top: -4px; bottom: -4px; }

.split-divider-grip[b-r28wqi3cut] {
    border-radius: 2px;
    background: var(--mud-palette-text-disabled);
    opacity: 0.7;
}
.split-divider-vertical .split-divider-grip[b-r28wqi3cut] { width: 2px; height: 32px; }
.split-divider-horizontal .split-divider-grip[b-r28wqi3cut] { width: 32px; height: 2px; }

.split-divider:hover[b-r28wqi3cut],
.split-divider:focus-visible[b-r28wqi3cut] {
    background: var(--mud-palette-primary);
}
.split-divider:hover .split-divider-grip[b-r28wqi3cut],
.split-divider:focus-visible .split-divider-grip[b-r28wqi3cut] {
    background: var(--mud-palette-primary-text);
    opacity: 1;
}
/* /Components/Tabs/Accounting.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.accounting-container[b-1nop8oo3y6] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-1nop8oo3y6] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-1nop8oo3y6] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-1nop8oo3y6] {
    width: 250px;
}

.nav-drawer.minimized[b-1nop8oo3y6] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-1nop8oo3y6] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-1nop8oo3y6]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-1nop8oo3y6]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-1nop8oo3y6]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-1nop8oo3y6] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-1nop8oo3y6] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-1nop8oo3y6]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-1nop8oo3y6]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-1nop8oo3y6]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-1nop8oo3y6] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-1nop8oo3y6] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-1nop8oo3y6]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-1nop8oo3y6]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-1nop8oo3y6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-1nop8oo3y6]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-1nop8oo3y6]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-1nop8oo3y6]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-1nop8oo3y6]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-1nop8oo3y6] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-1nop8oo3y6] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-1nop8oo3y6] {
        position: relative;
    }
    
    .nav-drawer.open[b-1nop8oo3y6] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        width: 100%;
    }
    
    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-1nop8oo3y6] {
        width: 30px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-1nop8oo3y6] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-1nop8oo3y6] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-1nop8oo3y6] {
    display: none;
}
/* /Components/Tabs/AdminTesting.razor.rz.scp.css */
/* Outer container - uses inline flex-column */

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-orkpmglrkr] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Navigation Drawer */
.nav-drawer[b-orkpmglrkr] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-orkpmglrkr] {
    width: 250px;
}

.nav-drawer.minimized[b-orkpmglrkr] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-orkpmglrkr] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-orkpmglrkr]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-orkpmglrkr]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-orkpmglrkr]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-orkpmglrkr] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-orkpmglrkr] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-orkpmglrkr]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-orkpmglrkr]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-orkpmglrkr]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-orkpmglrkr]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-orkpmglrkr]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Icon-only navigation when minimized */
.nav-icons[b-orkpmglrkr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-orkpmglrkr]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-orkpmglrkr]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-orkpmglrkr]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-orkpmglrkr]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-orkpmglrkr] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-orkpmglrkr] {
        position: relative;
    }

    .nav-drawer.open[b-orkpmglrkr] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    .nav-drawer.minimized[b-orkpmglrkr] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-orkpmglrkr] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-orkpmglrkr] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-orkpmglrkr] {
    display: none;
}
/* /Components/Tabs/AiChat.razor.rz.scp.css */
/* ===== Layout ===== */
.ai-chat-container[b-oxl2dyov35] {
    background-color: var(--mud-palette-background);
}

.content-area[b-oxl2dyov35] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===== Navigation Drawer (PickingManager pattern) ===== */
.nav-drawer[b-oxl2dyov35] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-oxl2dyov35] {
    width: 280px;
}

.nav-drawer.minimized[b-oxl2dyov35] {
    width: 60px;
}

.nav-drawer-header[b-oxl2dyov35] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 4px;
}

.nav-drawer.minimized .nav-drawer-header[b-oxl2dyov35] {
    justify-content: center;
    padding: 8px;
}

.nav-drawer-content[b-oxl2dyov35] {
    flex: 1;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Minimized icon-only nav */
.nav-icons[b-oxl2dyov35] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

.nav-icons[b-oxl2dyov35]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-icons[b-oxl2dyov35]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.nav-icons[b-oxl2dyov35]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

/* ===== Conversation Items ===== */
/* Unselected rows sit on the same `surface` tone as the sidebar, so at rest they blended into the panel.
   A subtle 1px border delimits each row as its own soft pill (WingMate "distinction via borders" direction)
   without any hard tone contrast. Active/selected override only border-left with the primary accent, so the
   3-side hairline remains and the box size stays consistent across states. */
.conversation-item[b-oxl2dyov35] {
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 6px;
    margin: 2px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    transition: all 0.2s ease;
}

.conversation-item:hover[b-oxl2dyov35] {
    background-color: var(--mud-palette-action-default-hover);
}

.conversation-item.active[b-oxl2dyov35] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    border-left: 3px solid var(--mud-palette-primary);
}

.conversation-item.active .text-muted[b-oxl2dyov35] {
    color: var(--mud-palette-text-secondary) !important;
}

/* Multi-select: a checked row + the bulk-action bar above the list. */
.conversation-item.selected[b-oxl2dyov35] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    border-left: 3px solid var(--mud-palette-primary);
}

.selection-action-bar[b-oxl2dyov35] {
    background-color: var(--mud-palette-surface);
    flex-shrink: 0;
}

/* Unread indicator: a small primary dot on a backgrounded conversation that received a new message. */
.unread-dot[b-oxl2dyov35] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    display: inline-block;
    margin-right: 6px;
}

/* Render-gate long transcripts (see MessageCssClass / RenderGateThreshold): the browser skips layout+paint for
   off-screen rows and reserves their space so scrolling stays stable. `auto` remembers each row's real height once
   it has been rendered once; the length is only the first-paint estimate. No virtualization, no JS observer. */
.message.msg-cv[b-oxl2dyov35] {
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
}

.conversation-title[b-oxl2dyov35] {
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Header title is click-to-rename (owners) — surface that it's editable on hover. */
.conv-title-editable[b-oxl2dyov35] {
    cursor: text;
    display: inline-block;
    max-width: 100%;
    border-radius: 4px;
    padding: 1px 6px;
    transition: background-color 0.15s ease;
}

.conv-title-editable:hover[b-oxl2dyov35] {
    background-color: var(--mud-palette-action-default-hover);
}

.conv-title-rename-field[b-oxl2dyov35] {
    max-width: 360px;
}

/* Settings button: hidden by default, shown on hover */
.conversation-settings-btn[b-oxl2dyov35] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.conversation-item:hover .conversation-settings-btn[b-oxl2dyov35],
.conversation-item.active .conversation-settings-btn[b-oxl2dyov35] {
    opacity: 1;
}

/* ===== Main Content ===== */
.main-content-area[b-oxl2dyov35] {
    overflow: hidden;
    background-color: var(--mud-palette-background);
    position: relative;
}

.chat-header[b-oxl2dyov35] {
    background-color: var(--mud-palette-surface);
    flex-shrink: 0;
    min-height: 48px;
}

.signalr-status-indicator[b-oxl2dyov35] {
    position: absolute;
    top: 50px;
    right: 16px;
    z-index: 10;
}

.chat-messages[b-oxl2dyov35] {
    /* The page background (what showed through before: the old `--mud-palette-background-grey` doesn't exist). */
    background-color: var(--mud-palette-background);
    /* Size container for the side gutter below (the chat's own width — phone, docked preview pane — not the viewport's). */
    container-type: inline-size;
}

.chat-messages.chat-messages-pending[b-oxl2dyov35] {
    visibility: hidden;
}

/* Centered, width-constrained inner content. The scroll container stays full-width (so the
   scrollbar sits at the edge) while messages + the compose row align in a comfortable column. */
.chat-content[b-oxl2dyov35] {
    /* Widened from 860px: Python sandbox Code blocks and wide result tables read much better with the extra
       room, and a matplotlib chart no longer has to shrink to fit. Still a bounded column rather than
       full-width, because long PROSE lines are harder to read the wider they get. */
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* The messages column carries the scroll container's old side padding too (2rem = 1rem + 1rem; max-width grown to match,
   so the wide layout is unchanged). */
.chat-messages > .chat-content[b-oxl2dyov35] {
    max-width: calc(980px + 2rem);
    padding-left: 2rem;
    padding-right: 2rem;
}

.chat-input-wrapper[b-oxl2dyov35] {
    container-type: inline-size;
}

/* Narrow chat (phone, or a docked preview pane squeezing it): a tighter gutter — messages 12px from the edge, the composer 8px. */
@container (max-width: 599.98px) {
    .chat-messages > .chat-content[b-oxl2dyov35] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .chat-input-wrapper > .chat-content[b-oxl2dyov35] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ===== Messages ===== */
.message[b-oxl2dyov35] {
    max-width: 80%;
}

/* Assistant messages render at full content width with no bubble. */
.message.ai-message-full[b-oxl2dyov35] {
    max-width: 100%;
}

/* Group turns visually: give the AI response a little extra breathing room above it
   when it directly follows a user query. */
.user-message + .ai-message-full[b-oxl2dyov35] {
    margin-top: 0.75rem;
}

.user-message[b-oxl2dyov35] {
    margin-left: auto;
}

.user-message .message-content[b-oxl2dyov35] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 0.75rem 1rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    position: relative;
}

/* Copy button anchored inside the user bubble, bottom-right; revealed on hover. The ANCHOR is what's taken
   out of flow (so the button never claims its own row); the tooltip then resolves relative to the small
   button rather than a full-width wrapper. */
[b-oxl2dyov35] .user-copy-anchor {
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 0;
}

[b-oxl2dyov35] .user-copy-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--mud-palette-primary-text);
}

.user-message:hover[b-oxl2dyov35]  .user-copy-btn {
    opacity: 0.75;
}

/* Edit pencil sits beside the copy button in the same hover anchor; mirrors the copy-button reveal. */
[b-oxl2dyov35] .user-edit-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--mud-palette-primary-text);
}

.user-message:hover[b-oxl2dyov35]  .user-edit-btn {
    opacity: 0.75;
}

/* "Editing a previous message" warning banner above the composer (MudAlert colors its own text). */
.edit-banner[b-oxl2dyov35] {
    font-size: 0.85rem;
}

/* The message currently being edited: dimmed + warning left-border so the in-progress edit is evident in
   the chat body (the messages after it are hidden from the transcript while editing). */
.message-editing[b-oxl2dyov35] {
    border-left: 3px solid var(--mud-palette-warning);
    padding-left: 10px;
    opacity: 0.7;
}

.editing-badge[b-oxl2dyov35] {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
    border-radius: 8px;
    padding: 1px 8px;
}

/* Full-width assistant: no bubble background/border/padding. */
.ai-message-full .message-content[b-oxl2dyov35] {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    padding: 0;
    border: none;
    border-radius: 0;
}

.message-role[b-oxl2dyov35] {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.user-message .message-role[b-oxl2dyov35] {
    color: var(--mud-palette-primary);
}

.ai-message .message-role[b-oxl2dyov35] {
    color: var(--mud-palette-success);
}

/* ===== Chat Input ===== */
.chat-input[b-oxl2dyov35] {
    background-color: var(--mud-palette-surface);
    flex-shrink: 0;
}

/* ===== Sleek composer: rounded container with growing text on top + a toolbar below ===== */
.chat-composer[b-oxl2dyov35] {
    /* Positioned so the + menu's one-time tip (ComposerAttachMenu) can sit just ABOVE the whole composer box. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 26px;
    background-color: var(--mud-palette-surface);
    /* Uniform 8px inset: with 36px (r=18) corner buttons this puts each button's center exactly 26px from
       the edges — concentric with the 26px corner radius (corner_r = button_r + inset). */
    padding: 8px;
    /* Breathing room above the composer + clearance below so the rounded border and focus ring aren't
       clipped by the bottom edge of the input area. */
    margin: 8px 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .chat-composer:focus-within[b-oxl2dyov35] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 1px var(--mud-palette-primary);
    }

/* View-only members: a subtle, single-line "you can't post" banner in place of the composer. Deliberately does
   NOT reuse .chat-composer (that box is column-flex + input chrome, which stacked the icon above the text). */
.viewer-readonly[b-oxl2dyov35] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 12px;
    padding: 9px 16px;
    border-radius: 20px;
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    line-height: 1.2;
    text-align: center;
}

    .viewer-readonly[b-oxl2dyov35]  .viewer-readonly-icon {
        font-size: 1.05rem;
        opacity: .75;
        flex-shrink: 0;
    }

/* Borderless growing textarea (Variant.Text + Underline=false); strip the component's default chrome and
   indent the text from the rounded edge (the buttons stay at the 6px inset for concentricity). */
.chat-composer[b-oxl2dyov35]  .composer-input {
    margin-top: 0;
}

    .chat-composer[b-oxl2dyov35]  .composer-input .mud-input {
        margin-top: 0;
    }

    .chat-composer[b-oxl2dyov35]  .composer-input .mud-input-slot {
        padding: 6px 10px 0;
    }

/* The words behind the tone dot: a compact tinted strip between the text and the toolbar (flagged → error, frustrated → warning;
   palette variables, so light and dark both work). Icon · label · chips, with the label set a little apart from the chips. Only
   rendered when there are words, so the composer never shifts otherwise. Chips wrap, and a very long word wraps inside its chip,
   so a phone never scrolls sideways. */
.composer-tone-line[b-oxl2dyov35] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    min-width: 0;
    width: fit-content;               /* hugs its words instead of a full-width bar; wraps once it reaches the edge */
    max-width: calc(100% - 16px);
    margin: 4px 8px 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
}

    .composer-tone-line--flagged[b-oxl2dyov35] {
        color: var(--mud-palette-error);
        background-color: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    }

    .composer-tone-line--frustrated[b-oxl2dyov35] {
        color: var(--mud-palette-warning);
        background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    }

    .composer-tone-line[b-oxl2dyov35]  .composer-tone-line-icon {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    .composer-tone-line-text[b-oxl2dyov35] {
        margin-inline-end: 2px;   /* label → first chip reads as 8px with the 6px gap */
    }

    .composer-tone-line[b-oxl2dyov35]  .composer-tone-chip {
        margin: 0;
        max-width: 100%;
        height: auto;
        min-height: 22px;
        padding: 0 8px;
        border-radius: 11px;
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.2;
    }

        .composer-tone-line[b-oxl2dyov35]  .composer-tone-chip .mud-chip-content {
            white-space: normal;
            overflow-wrap: anywhere;
        }

/* Toolbar row: attach · model · effort · spacer · send. No own padding so the corner buttons sit at the
   composer's 6px inset (see concentric note above). */
.composer-toolbar[b-oxl2dyov35] {
    padding: 0;
    /* A size container: the model + effort pills collapse into one menu when the TOOLBAR is narrow (phone, docked
       preview pane, narrow window), whatever the viewport. Inline-size containment also keeps the pills' text from
       widening the composer. */
    container-type: inline-size;
}

/* Wide: the two pills sit in the toolbar's own flex row. Narrow: one combined "model · effort" menu instead. */
.composer-pills-wide[b-oxl2dyov35] {
    display: contents;
}

.composer-pills-compact[b-oxl2dyov35] {
    display: none;
    min-width: 0;
}

@container (max-width: 439.98px) {
    .composer-pills-wide[b-oxl2dyov35] {
        display: none;
    }

    .composer-pills-compact[b-oxl2dyov35] {
        display: flex;
        flex: 0 1 auto;
    }
}

/* The pills may shrink (their text ellipsises) — mic + send are flex-shrink-0, so Send never leaves the row. */
.composer-toolbar[b-oxl2dyov35]  .mud-menu {
    min-width: 0;
}

.composer-pills-compact[b-oxl2dyov35]  .composer-settings-menu,
.composer-pills-compact[b-oxl2dyov35]  .composer-settings-menu .mud-menu-activator {
    min-width: 0;
    max-width: 100%;
}

/* Section headings inside the combined menu ("Model" / "Reasoning effort"). */
.composer-menu-heading[b-oxl2dyov35] {
    padding: 6px 16px 2px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* All composer icon buttons (attach · send · stop) share one circular footprint so they read as a set. */
.chat-composer[b-oxl2dyov35]  .composer-icon-btn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
}

    .chat-composer[b-oxl2dyov35]  .composer-icon-btn .mud-icon-root {
        font-size: 1.2rem;
    }

/* The send button is a wider PILL (slightly larger / easier to tap, esp. on mobile where Enter no longer
   sends). Its right end is still a radius-18 semicircle at the same 8px inset, so it stays concentric with
   the composer's bottom-right corner. */
.chat-composer[b-oxl2dyov35]  .composer-send-btn {
    width: 54px;
    border-radius: 18px;
}

/* Clickable rounded pill used for the model + effort selectors */
.composer-pill[b-oxl2dyov35] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 6px 0 10px;
    border-radius: 16px;
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
    transition: background-color .15s ease;
}

    .composer-pill:hover[b-oxl2dyov35] {
        background-color: var(--mud-palette-action-default-hover);
    }

/* Web-search event line in the transcript (proposal outcome): compact, distinct from chat bubbles, muted. */
.websearch-event[b-oxl2dyov35] {
    padding: 4px 10px;
    border-left: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 0 8px 8px 0;
    width: fit-content;
    max-width: 100%;
}

/* "Use latest" transcript line — styled like the web-search event; file names are links that preview the NEW copy. */
.file-event[b-oxl2dyov35] {
    padding: 4px 10px;
    border-left: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 0 8px 8px 0;
    width: fit-content;
    max-width: 100%;
}

.file-event-text[b-oxl2dyov35] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.file-event-link[b-oxl2dyov35] {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.file-event-link:hover[b-oxl2dyov35] {
    text-decoration-thickness: 2px;
}

.file-event-link:focus-visible[b-oxl2dyov35] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.file-event-name[b-oxl2dyov35] {
    font-weight: 600;
}

/* A saved line's "Open" / "Version history" links, after the text. */
.file-event-link.file-event-action[b-oxl2dyov35] {
    margin-left: .5rem;
    white-space: nowrap;
}

/* A proposed-save line's "Review" / "Turn back on": a little more room after the status text, a busy link reads as disabled. */
.file-event--proposal .file-event-action[b-oxl2dyov35] {
    margin-left: .625rem;
}

    .file-event--proposal .file-event-action:disabled[b-oxl2dyov35] {
        cursor: default;
        opacity: .6;
    }

/* Header "Files · N" (wide) / badged icon (narrow). */
[b-oxl2dyov35] .files-panel-open-btn {
    min-width: 0;
    white-space: nowrap;
}

/* Web-search approval card: a subtle bordered panel above the composer where the user reviews/edits/denies the
   query before anything is sent externally. */
.websearch-approval[b-oxl2dyov35] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    margin: 0 0 8px;
}

    .websearch-approval .websearch-warning[b-oxl2dyov35] {
        font-size: .8125rem;
    }

/* Non-owner view of the model/effort pills: shows the current value but isn't interactive. */
.composer-pill-readonly[b-oxl2dyov35] {
    cursor: default;
}

    .composer-pill-readonly:hover[b-oxl2dyov35] {
        background-color: transparent;
    }

.composer-pill-text[b-oxl2dyov35] {
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Typing Indicator ===== */
.typing-indicator[b-oxl2dyov35] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.typing-indicator span[b-oxl2dyov35] {
    height: 8px;
    width: 8px;
    background-color: var(--mud-palette-text-secondary);
    border-radius: 50%;
    animation: typing-b-oxl2dyov35 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1)[b-oxl2dyov35] {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2)[b-oxl2dyov35] {
    animation-delay: -0.16s;
}

@keyframes typing-b-oxl2dyov35 {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== Run Events Feed ===== */
.run-events-feed[b-oxl2dyov35] {
    max-height: 300px;
    overflow-y: auto;
}

.run-event-current[b-oxl2dyov35] {
    border-left: 2px solid var(--mud-palette-primary);
    padding-left: 8px;
}

.event-detail-pre[b-oxl2dyov35] {
    font-size: 0.75rem;
    line-height: 1.3;
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: 6px 8px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    color: var(--mud-palette-text-secondary);
}

.run-events-history[b-oxl2dyov35] {
    opacity: 0.85;
}

/* ===== Mobile Drawer Overlay ===== */
.mobile-drawer[b-oxl2dyov35] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    background-color: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
}

/* The conversation ⋯ and group ⋯ menus are hover-gated on desktop (opacity:0 until :hover). Touch has no
   hover, so surface them permanently inside the mobile drawer — otherwise Share/Settings/Move-to-group and the
   group Rename/Delete/Add actions would be unreachable on a phone. */
.mobile-drawer .conversation-settings-btn[b-oxl2dyov35],
.mobile-drawer .group-menu-btn[b-oxl2dyov35] {
    opacity: 1;
}

/* No drag handle on mobile, so reclaim the folder-header's left gutter that made room for it on desktop. */
.mobile-drawer .folder-header[b-oxl2dyov35] {
    padding-left: 8px;
}

/* Roomier rows for touch. */
.mobile-drawer .conversation-item[b-oxl2dyov35] {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ===== Responsive ===== */
@media (max-width: 767.98px) {
    .message[b-oxl2dyov35] {
        max-width: 95%;
    }
}

/* Smooth transitions for drawer content */
.nav-drawer *[b-oxl2dyov35] {
    transition: opacity 0.2s ease;
}

/* ===== Token info on messages ===== */
[b-oxl2dyov35] .token-info {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    margin-top: 4px;
    user-select: none;
}

[b-oxl2dyov35] .token-info:hover {
    opacity: 0.8;
}

/* ===== Cost ===== */
/* Run cost sits inside .token-info (inheriting its small, faint styling); a divider sets it apart from
   the token counts, and the help cursor signals the hover breakdown. */
[b-oxl2dyov35] .token-info .token-cost {
    cursor: help;
    padding-left: 8px;
    border-left: 1px solid var(--mud-palette-divider);
    font-variant-numeric: tabular-nums;
}

/* Total cost in the conversation header. */
[b-oxl2dyov35] .conversation-cost {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    cursor: help;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===== Model selector in header ===== */
[b-oxl2dyov35] .model-selector .mud-input-slot {
    font-size: 0.8rem;
    padding: 2px 4px;
}

[b-oxl2dyov35] .model-selector .mud-select-input {
    min-height: unset;
}

/* ===== Chat input wrapper + drag-and-drop ===== */
.chat-input-wrapper[b-oxl2dyov35] {
    position: relative;
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
}

/* Drop overlay, shown only while a file is dragged over the compose area. The InputFile inside it
   (inline opacity:0, covering this box) captures the drop natively — no custom JS, no scoped CSS
   on the input (scoped styles don't reach a component's rendered element). */
.chat-drop-hint[b-oxl2dyov35] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 4px;
    /* Visual only — let the drop pass through to the InputFile sink beneath it. */
    pointer-events: none;
}

/* ===== Attachment chips (pending strip + history) ===== */
.attachment-chips[b-oxl2dyov35] {
    row-gap: 0.5rem;
}

/* Pending upload strip only: with the raised per-message cap (up to 25 files) the chips would grow tall and
   push the composer up the screen, so cap the strip at ~3 rows and let it scroll. History chips share the
   .attachment-chips base but are never height-limited. */
.pending-attachment-chips[b-oxl2dyov35] {
    max-height: 6.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;   /* clearance so the scrollbar doesn't overlap a chip's close (X) button */
}


/* Truncate only the file-name LABEL with an ellipsis — NOT the whole chip — so the icon and the
   X/close button always stay fully visible (truncating the chip content clipped the close button on
   long names). The full name is on the chip's hover tooltip (title), added per-chip in the markup. */
[b-oxl2dyov35] .attachment-chips .chip-label {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* "+N images" badge on a .msg chip whose embedded/inline images were extracted into analyzed attachments. */
[b-oxl2dyov35] .attachment-chips .embedded-images-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    line-height: 1.4;
    border-radius: 999px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    vertical-align: middle;
    white-space: nowrap;
}

/* Attachment chips inside the primary (blue) user bubble were invisible — chip and bubble were both blue.
   Give them a translucent light fill + contrasting text so they read clearly against the bubble. */
.user-message[b-oxl2dyov35]  .attachment-chips .mud-chip {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--mud-palette-primary-text);
}

.user-message[b-oxl2dyov35]  .attachment-chips .mud-chip .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

/* Shared AttachmentChip inside the primary (blue) user bubble: same translucent treatment the MudChips had, so the
   chip reads against the bubble. ::deep because .wm-chip is rendered by the child component. */
.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--mud-palette-primary-text);
}

.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip .mud-icon-root,
.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip .wm-chip-size {
    color: var(--mud-palette-primary-text) !important;
}

/* The neutral "Older copy" status (grey on a faint grey tint) was ~1.3:1 on the blue bubble. A LIGHT fill doesn't help
   (white text on a lightened blue measured 2.7:1), so: the bubble's text colour on a DARK translucent fill (~5:1), and the
   older chip is only lightly muted inside the bubble. (Coloured statuses — Updated / CUI / No access — keep their colours.) */
.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip-status--oldercopy {
    color: var(--mud-palette-primary-text);
    background: rgba(0, 0, 0, 0.22);
}

.user-message[b-oxl2dyov35]  .attachment-chips .wm-chip--older {
    opacity: 0.85;
}

/* "+N more" after five chips (expands the list inline). */
.attachment-chips[b-oxl2dyov35]  .chips-more-btn {
    text-transform: none;
    min-width: 0;
    padding: 0 8px;
    font-size: 0.78rem;
}

.user-message[b-oxl2dyov35]  .chips-more-btn {
    color: var(--mud-palette-primary-text);
}

/* Pending strip extras: Retry on a failed SharePoint copy, protected-file note. */
[b-oxl2dyov35] .chip-inline-btn {
    text-transform: none;
    min-width: 0;
    padding: 0 6px;
    line-height: 1.4;
}

.pending-note[b-oxl2dyov35] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.shared-source-notice[b-oxl2dyov35] {
    font-size: 0.8125rem;
}

/* The hidden upload input behind the composer's + menu ("Upload from this device" opens it programmatically). */
.chat-composer[b-oxl2dyov35]  .composer-hidden-upload {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ===== Preview pane (beside the chat) ===== */
.preview-pane-host[b-oxl2dyov35] {
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The drag handle between chat and pane: a 6 px hit area with a hairline that lights up on hover / focus / drag. */
.preview-resizer[b-oxl2dyov35] {
    flex: 0 0 6px;
    margin-right: -3px;
    margin-left: -3px;
    position: relative;
    z-index: 3;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.preview-resizer[b-oxl2dyov35]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    background: transparent;
    transition: background-color 120ms ease;
}

.preview-resizer:hover[b-oxl2dyov35]::after,
.preview-resizer:focus-visible[b-oxl2dyov35]::after,
.preview-resizer.dragging[b-oxl2dyov35]::after {
    background: var(--mud-palette-primary);
}

/* Maximized ("Back to chat"): the pane takes the whole tab; the chat and drawer stay mounted (SignalR, drafts) but hidden. */
.content-area.preview-maximized .main-content-area[b-oxl2dyov35],
.content-area.preview-maximized .nav-drawer[b-oxl2dyov35] {
    display: none !important;
}

.content-area.preview-maximized .preview-pane-host[b-oxl2dyov35] {
    flex: 1 1 auto;
    width: auto;
    border-left: none;
}

/* ===== Clarification quick-reply chips ===== */
.clarification-chips[b-oxl2dyov35] {
    row-gap: 0.5rem;
}

/* ===== User message text + collapse toggle ===== */
.user-message-text[b-oxl2dyov35] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lives inside the primary-colored user bubble, so it must use the bubble's contrasting text color
   (primary-text) — not primary, which would be invisible against the bubble background. */
[b-oxl2dyov35] .show-more-btn {
    color: var(--mud-palette-primary-text);
    text-transform: none;
    min-width: 0;
    text-decoration: underline;
    opacity: 0.85;
}

[b-oxl2dyov35] .show-more-btn:hover {
    opacity: 1;
    background-color: transparent;
}

/* ===== In-process streaming content — now renders real markdown client-side (marked), so it must look like the
   finalized Markdig output. Critically NO `white-space: pre-wrap`: marked's HTML has literal newlines between tags
   (</p>\n<ul>\n<li>) and pre-wrap would render each as a visible line break, blowing up the spacing. No italic
   either — markdown carries its own emphasis. A subtle fade + accent bar still signals "still generating". ===== */
.in-process-content[b-oxl2dyov35] {
    position: relative;
    word-break: break-word;
    opacity: 0.7;
    margin-top: 4px;
}

    /* The accent bar sits in the gutter, OUTSIDE the text box, so the text doesn't jump left when the answer finalizes. */
    .in-process-content[b-oxl2dyov35]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        width: 2px;
        background-color: var(--mud-palette-divider);
    }

/* ===== Copy-answer button (finalized assistant messages) — anchored bottom-right of the response, in line
   with the last row of text, revealed on hover (mirrors the user-message copy button). ===== */
.assistant-body[b-oxl2dyov35] {
    position: relative;
}

[b-oxl2dyov35] .assistant-copy-anchor {
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 0;
}

[b-oxl2dyov35] .copy-answer-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--mud-palette-text-secondary);
}

.assistant-body:hover[b-oxl2dyov35]  .copy-answer-btn {
    opacity: 0.7;
}

/* ===== Activity toggle button — keep "Activity" on one line so it isn't clipped ===== */
[b-oxl2dyov35] .run-activity-btn {
    text-transform: none;
    white-space: nowrap;
    min-width: 0;
}

/* ===== Empty state (conversation selected, no messages) ===== */
.empty-conversation-state[b-oxl2dyov35] {
    color: var(--mud-palette-text-secondary);
}

.starter-prompt-chips[b-oxl2dyov35] {
    row-gap: 0.5rem;
    /* Shrink-wrap the chips (still centred, still wrapping) so the Welcome tour's spotlight hugs them instead of the full column. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.attach-hint[b-oxl2dyov35] {
    color: var(--mud-palette-text-secondary);
}

/* ===== Conversation grouping (per-user sidebar folders) ===== */
.group-section[b-oxl2dyov35] {
    margin-bottom: 6px;
    position: relative;   /* anchor for the absolutely-positioned group-drag handle */
}

/* Folder header = a distinct "section bar" so folders read clearly apart from conversation rows. A tinted fill
   PLUS a full 1px border makes it read as a structural bar — deliberately different from the ACTIVE chat row,
   which is a tinted fill with only a LEFT accent. The uppercase bold label reinforces "heading, not chat title".
   (The old background-grey was ~the surface colour, which is why sections blended in.) */
.group-header[b-oxl2dyov35] {
    min-height: 32px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.28);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.09);
    cursor: pointer;
    user-select: none;
}

.group-header:hover[b-oxl2dyov35] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.40);
}

/* "Shared with me" uses a distinct SECONDARY accent — clearly different from BOTH your own folders (primary) and
   the neutral grey Ungrouped bar — so shared content is obvious at a glance. */
.shared-header[b-oxl2dyov35] {
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.40);
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
}

.shared-header:hover[b-oxl2dyov35] {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.22);
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.50);
}

/* The Ungrouped catch-all is the quiet, NEUTRAL section: a grey bar (no hue — distinct from the primary folders
   and the secondary "Shared with me") that's still clearly lifted off the surface by its fill + border. Shape
   (radius, min-height, padding) inherits from .group-header; we only swap the fill + border colour. */
.ungrouped-header[b-oxl2dyov35] {
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-divider);
    margin-top: 6px;
}

.ungrouped-header:hover[b-oxl2dyov35] {
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-text-secondary);
}

/* Section label: compact uppercase heading — unmistakably a section, not a chat title. Full-strength text
   colour (the old secondary grey was the main reason headers "blended in"). */
.group-name[b-oxl2dyov35] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

/* Ungrouped is the quiet catch-all — keep its label muted. */
.ungrouped-header .group-name[b-oxl2dyov35] {
    color: var(--mud-palette-text-secondary);
}

/* Count pill at the right edge of the header — opaque surface fill + border so it stays legible on the tint. */
.group-count[b-oxl2dyov35] {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    margin-right: 2px;
}

.group-folder-btn[b-oxl2dyov35] {
    color: var(--mud-palette-primary);
}

.shared-header .group-folder-btn[b-oxl2dyov35] {
    color: var(--mud-palette-secondary);
}

.ungrouped-header .group-folder-btn[b-oxl2dyov35] {
    color: var(--mud-palette-text-secondary);
}

/* Group ⋯ menu button — subtle until hover, like the conversation settings button. */
.group-menu-btn[b-oxl2dyov35] {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.group-header:hover .group-menu-btn[b-oxl2dyov35] {
    opacity: 1;
}

/* Drag grip for reordering folders — only this initiates a group drag (SortableList Handle). Absolutely
   positioned over the header's left edge; it lives in the group-section (outer list item), NOT inside the
   inner conversation list, so the outer group Sortable actually receives its mousedown.
   ::deep is required because the grip is a MudIcon (child component) — its rendered <svg> doesn't carry this
   component's scoped attribute, so a plain scoped selector wouldn't match it (that left it in normal flow,
   i.e. on its own line above the header). */
[b-oxl2dyov35] .group-drag-handle {
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 3;
    cursor: grab;
    color: var(--mud-palette-text-disabled);
}

/* Leave room at the left of a folder header for the absolute drag handle. */
.folder-header[b-oxl2dyov35] {
    padding-left: 20px;
}

/* Each folder body is a drop zone. min-height keeps an EMPTY folder targetable; padding-bottom gives a buffer
   so releasing just past the last row still lands inside the list (content-sized lists reject drops past the
   last child — the "small drop area at the bottom" problem). */
.group-drop[b-oxl2dyov35] {
    min-height: 34px;
    padding-bottom: 10px;
}

/* The Ungrouped list is the bottom-most drop zone in the sidebar, so give it a much larger bottom buffer to
   catch drops released in the empty space beneath the last conversation. */
.ungrouped-drop[b-oxl2dyov35] {
    padding-bottom: 48px;
}

.ungrouped-section[b-oxl2dyov35] {
    margin-top: 4px;
}

/* Conversations inside a folder are indented under a guide line so they read as the folder's children. */
.folder-drop .conv-row[b-oxl2dyov35] {
    margin-left: 11px;
    border-left: 2px solid var(--mud-palette-divider);
}

/* Draggable conversation rows */
.conv-row[b-oxl2dyov35] {
    cursor: pointer;
}

.group-rename-field[b-oxl2dyov35] {
    font-size: 0.8rem;
}

/* ===== Supporting (intermediate) generated files =====
   The disclosure that holds the ingredients of a deliverable — e.g. the chart PNGs python-docx had to embed
   into a Word report as pictures, since it cannot create a native chart. Deliberately quiet: it is a way back
   to the files, not a second call to action competing with the deliverable's own chip. */
.supporting-files[b-oxl2dyov35]  .supporting-files-toggle {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.78rem;
    font-weight: 400;
    padding: 0.1rem 0.4rem;
    min-width: 0;
    min-height: 0;
    color: var(--mud-palette-text-secondary);
}

.supporting-files[b-oxl2dyov35]  .supporting-files-toggle .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.supporting-files[b-oxl2dyov35]  .supporting-files-toggle:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ===== Sandbox charts/images, shown in the answer under the prose =====
   Stacked rather than tiled: each is a chart someone needs to read, and WingmateInlineImage already bounds its
   own size (max-height, fluid width) and holds a fixed skeleton while loading, so a late load never reflows
   the transcript under the reader. */
.answer-images[b-oxl2dyov35] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
/* /Components/Tabs/AppRoleManager.razor.rz.scp.css */
/* App Roles (ui#215). The sections are child components, so their shared styles reach them through ::deep. */

.approles-container[b-lt19bk297e] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--mud-palette-background);
}

.approles-header[b-lt19bk297e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 16px 24px 4px;
}

.approles-header-end[b-lt19bk297e] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.approles-container[b-lt19bk297e]  .approles-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0 12px;
}

.approles-container[b-lt19bk297e]  .approles-panel {
    padding: 20px 24px 24px;
}

/* A side list and a main detail column; the side stacks above the main on a narrow tab. */
.approles-container[b-lt19bk297e]  .approles-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.approles-container[b-lt19bk297e]  .approles-side {
    flex: 1 1 300px;
    max-width: 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.approles-container[b-lt19bk297e]  .approles-main {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.approles-container[b-lt19bk297e]  .approles-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.approles-container[b-lt19bk297e]  .approles-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.approles-container[b-lt19bk297e]  .approles-card-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-table-lines);
    background: var(--mud-palette-background);
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.approles-container[b-lt19bk297e]  .approles-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--mud-palette-table-lines);
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.approles-container[b-lt19bk297e]  .approles-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.approles-container[b-lt19bk297e]  .approles-row.selected {
    background: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.approles-container[b-lt19bk297e]  .approles-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size: 12px;
    font-weight: 500;
}

.approles-container[b-lt19bk297e]  .approles-avatar.large {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.approles-container[b-lt19bk297e]  .approles-value {
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.approles-container[b-lt19bk297e]  .approles-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
}

.approles-container[b-lt19bk297e]  .approles-table-wrap {
    overflow-x: auto;
}

.approles-container[b-lt19bk297e]  .approles-table td,
.approles-container[b-lt19bk297e]  .approles-table th {
    vertical-align: middle;
}

.approles-container[b-lt19bk297e]  .approles-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.approles-container[b-lt19bk297e]  .approles-table tr.selected td {
    background: var(--mud-palette-primary-hover);
}

.approles-container[b-lt19bk297e]  .approles-table tr.clickable {
    cursor: pointer;
}

.approles-container[b-lt19bk297e]  .approles-table tr.off td {
    color: var(--mud-palette-text-secondary);
}

.approles-container[b-lt19bk297e]  .approles-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.approles-container[b-lt19bk297e]  .approles-stat {
    flex: 1 1 200px;
    padding: 14px 18px;
}

.approles-container[b-lt19bk297e]  .approles-stat-number {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
/* /Components/Tabs/BarcodeGenerator.razor.rz.scp.css */
.barcode-container[b-hb8pf0mq50] {
    overflow-y: auto;
}

/* The tab's full width (16 px gutters, BarcodeGenerator.PreviewInset), so a long barcode has room. The column is the old 960 px
   page less its gutters. */
.barcode-body[b-hb8pf0mq50] {
    --barcode-column-width: 928px;
    padding: 24px 16px;
}

/* A readable, centred column: the heading, the text box and its message, the empty state, "Decodes to" and Copy. It shrinks to fit a
   narrow tab. */
.barcode-column[b-hb8pf0mq50] {
    max-width: var(--barcode-column-width);
    margin-inline: auto;
}

/* Centred, and at least the column's width, so a short barcode lines up with the column's left edge. A wider barcode widens it, up to
   the tab's width; past that its box scrolls. It hugs what it holds: it's also the tour's "Check the barcode" spotlight. */
.barcode-area[b-hb8pf0mq50] {
    width: max-content;
    min-width: min(var(--barcode-column-width), 100%);
    max-width: 100%;
    margin-top: 16px;
    margin-inline: auto;
}

/* A barcode wider than the tab scrolls sideways in here; the page never does. */
.barcode-scroll[b-hb8pf0mq50] {
    max-width: 100%;
    overflow-x: auto;
}

/* White in both themes: scanners need dark bars on white. As wide as the drawing, never squeezed. */
.barcode-card[b-hb8pf0mq50] {
    width: max-content;
    background: #ffffff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    line-height: 0;
}

/* Always drawn at its own size, whole pixels a module (BarcodeDrawing.ScreenModulePixels): scaling it down would make bars grey
   and uneven. The copy is drawn separately, at 3 px a module. */
.barcode-svg[b-hb8pf0mq50] {
    display: block;
}

/* The exact text, spaces at either end included. */
.barcode-decodes[b-hb8pf0mq50] {
    font-family: Consolas, 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

/* MudPaper's own element: reached through ::deep. */
.barcode-area[b-hb8pf0mq50]  .barcode-empty {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Components/Tabs/BomViewer.razor.rz.scp.css */
.content-area[b-attnqb113k] {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

.left-pane[b-attnqb113k] {
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow: hidden; /* Parent container should not scroll */
    flex: none;
    /* Soft, elevated sidebar (WingMate-style) rather than the darker main-body background. */
    background-color: var(--mud-palette-surface);
}

/* Fixed header section */
.left-pane-header[b-attnqb113k] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

/* Scrollable content section */
.left-pane-content[b-attnqb113k] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile-friendly left pane styles */
.mobile-left-pane[b-attnqb113k] {
    position: absolute;
    width: 100% !important;
    height: 100%;
    z-index: 10;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-120%); /*  Start off-screen */
    transition: transform 0.3s ease-out;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0rem;
}

/*Class for open state */
.mobile-left-pane-open[b-attnqb113k] {
    transform: translateX(0); /*Slide In */
}

.main-body[b-attnqb113k] {
    overflow-y: auto;
}

/* Mobile content area styles */
.mobile-content-area[b-attnqb113k] {
    position: relative;
    overflow: hidden;
}

.resizer[b-attnqb113k] {
    width: 8px;
    background: linear-gradient(to right, var(--mud-palette-lines-default) 1px, transparent 1px, transparent calc(100% - 1px), var(--mud-palette-lines-default) calc(100% - 1px));
    position: relative;
    transition: background-color 0.2s;
    cursor: col-resize;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

    .resizer:hover[b-attnqb113k],
    .resizer.dragging[b-attnqb113k] {
        background: linear-gradient(to right, var(--mud-palette-primary) 1px, rgba(var(--mud-palette-primary-rgb),0.1) 1px, rgba(var(--mud-palette-primary-rgb),0.1) calc(100% - 1px), var(--mud-palette-primary) calc(100% - 1px));
    }

.resizer-handle[b-attnqb113k] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    transition: opacity 0.2s;
}

.resizer:hover .resizer-handle[b-attnqb113k],
.resizer.dragging .resizer-handle[b-attnqb113k] {
    opacity: 1;
}

/* Style for the body when resizing is in progress */
body.resizing[b-attnqb113k] {
    cursor: col-resize;
    user-select: none;
}

.resizer .bi-grip-vertical[b-attnqb113k] {
    font-size: 1.2rem;
    color: inherit;
}



.file-list-details[b-attnqb113k] {
    display: flex;
    flex-direction: column;
}

.header-bar[b-attnqb113k] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 1;
    font-size: 0.8rem;
}

.breadcrumb[b-attnqb113k] {
    background: transparent;
    margin: 0;
    padding: 0;
}


.accordion[b-attnqb113k] {
    margin: -0.5rem;
}

.accordion-item[b-attnqb113k] {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

    .accordion-item:first-of-type[b-attnqb113k] {
        border-top: none;
    }

    .accordion-item:last-of-type[b-attnqb113k] {
        border-bottom: none;
    }

.accordion-button[b-attnqb113k] {
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

    .accordion-button:not(.collapsed)[b-attnqb113k] {
        background-color: var(--mud-palette-background-grey);
    }

    .accordion-button[b-attnqb113k]::after {
        width: 0.875rem;
        height: 0.875rem;
        background-size: 0.875rem;
    }

[b-attnqb113k] .mud-treeview .mud-treeview-item {
    min-height: 16px;
    margin: 0;
}

    [b-attnqb113k] .mud-treeview .mud-treeview-item .tree-item-text {
        
        line-height: 1;
    }

[b-attnqb113k] .mud-treeview .mud-treeview-item-content {
    padding: 1px 1px 1px 0px;
    min-height: 20px;
    gap: 4px;
    font-size: 0.90rem !important;
}

[b-attnqb113k] .mud-treeview .mud-treeview-item-arrow {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

/* Condensed favorites styling for desktop */
.favorite-item-condensed[b-attnqb113k] {
    font-size: 0.75rem;
    line-height: 1;
}

.favorite-item[b-attnqb113k] {
    display: flex;
    align-items: center;
}

    .favorite-item:hover[b-attnqb113k] {
        background: var(--mud-palette-background-grey);
    }

[b-attnqb113k] .mud-list-item.py-0 {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 24px;
}

[b-attnqb113k] .mud-treeview .mud-treeview-item-icon {
    font-size: 1rem;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

[b-attnqb113k] .mud-treeview-item-content .mud-icon-root {
    font-size: 1rem;
}

[b-attnqb113k] .mud-treeview-item-group {
    padding-left: 16px;
    margin: 0;
}

/* Mobile specific accordion and tree styles */
.bom-viewer-component.mobile .accordion-button[b-attnqb113k] {
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: 500;
}

    .bom-viewer-component.mobile .accordion-button[b-attnqb113k]::after {
        width: 1.25rem;
        height: 1.25rem;
        background-size: 1.25rem;
    }

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview .mud-treeview-item {
    min-height: 32px;
    margin: 4px 0;
}

    .bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview .mud-treeview-item .tree-item-text {
        font-size: 1.125rem !important;
        line-height: 1.3;
    }

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview .mud-treeview-item-content {
    padding: 6px 4px;
    min-height: 32px;
    gap: 8px;
}

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview .mud-treeview-item-arrow {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview .mud-treeview-item-icon {
    font-size: 1.4rem;
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview-item-content .mud-icon-root {
    font-size: 1.4rem;
}

.bom-viewer-component.mobile[b-attnqb113k]  .mud-treeview-item-group {
    padding-left: 24px;
}

.file-grid-item[b-attnqb113k] {
    width: 85px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    border-radius: 6px;
    padding: 0px 5px;
}

    .file-grid-item:hover[b-attnqb113k] {
        background: var(--mud-palette-background-grey);
    }

.dummy-file-grid-item[b-attnqb113k] {
    width: 85px;
    margin-bottom: 0.5rem;
    user-select: none;
    border-radius: 6px;
    padding: 0px 5px;
}

.file-grid-icon[b-attnqb113k] {
    font-size: 35px;
    color: var(--mud-palette-text-secondary);
}

.file-grid-item .bi-folder-fill[b-attnqb113k] {
    color: var(--mud-palette-warning);
}

.file-grid-item .bi-file-earmark-fill[b-attnqb113k] {
    color: var(--mud-palette-primary);
}

.file-grid-name[b-attnqb113k] {
    font-size: 0.75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    width: 100%;
    max-width: 80px;
    margin-bottom: 5px;
}

/* Table view icons */
.file-table-icon[b-attnqb113k] {
    display: inline-block;
    width: 1.3rem;
    text-align: center;
    margin-right: 0.4rem;
}

    .file-table-icon .bi[b-attnqb113k] {
        font-size: 1.1rem;
        vertical-align: middle;
    }

    .file-table-icon .bi-folder-fill[b-attnqb113k] {
        color: var(--mud-palette-warning);
    }

    .file-table-icon .bi-file-earmark-fill[b-attnqb113k] {
        color: var(--mud-palette-primary);
    }

/* MudTable fixed header styles */
.file-list-details[b-attnqb113k] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table-container[b-attnqb113k] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table[b-attnqb113k] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table-container .mud-table-head[b-attnqb113k] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mud-table-container .mud-table-body[b-attnqb113k] {
    flex: 1;
    overflow-y: auto;
}
/* /Components/Tabs/ComponentChecker.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.componentchecker-container[b-lnp38eoik9] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-lnp38eoik9] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-lnp38eoik9] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-lnp38eoik9] {
    width: 250px;
}

.nav-drawer.minimized[b-lnp38eoik9] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-lnp38eoik9] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-lnp38eoik9]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-lnp38eoik9]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-lnp38eoik9]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-lnp38eoik9] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-lnp38eoik9] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-lnp38eoik9]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-lnp38eoik9]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-lnp38eoik9]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-lnp38eoik9]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-lnp38eoik9]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-lnp38eoik9]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-lnp38eoik9]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Icon-only navigation when minimized */
.nav-icons[b-lnp38eoik9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-lnp38eoik9]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-lnp38eoik9]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-lnp38eoik9]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-lnp38eoik9]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-lnp38eoik9] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Component lines grid, Line and Item frozen (env#343). ComponentLinesGrid sets StickyLeft on the two columns on a desktop and
   adds `cc-freeze` to the grid; every rule here hangs off that class, so a phone's grid and Picking Manager's grids are untouched.
   MudBlazor clips the table container once a column is sticky, so a grid with a fixed height no longer scrolled down (MudBlazor
   #7237). Here the container scrolls both ways at the grid's own width, and the sticky cells stick to it. The table keeps its
   old width: its columns' natural widths, floored at --pm-grid-min-width. Its borders are separate (Bootstrap collapses every
   table's), because a collapsed border stays behind when its sticky cell moves, leaving the frozen cells without lines. */
.main-content-area[b-lnp38eoik9]  .cc-freeze .mud-table-container {
    width: 100% !important;
    overflow: auto !important;
    /* Keep Line (80 px) and Item (~165 px) clear: Chrome sees a field under them as in view, so Shift+Tab didn't scroll to it. */
    scroll-padding-inline-start: 260px;
    /* And the fixed header (56 px), for the same reason: Tab and the arrow keys (env#345) mustn't land on a field hidden under it. */
    scroll-padding-block-start: 64px;
    /* And the right edge: Chrome leaves a target that's already partly in view where it is, so Right could land on a pencil showing 4 of its 26 px. */
    scroll-padding-inline-end: 40px;
}

.main-content-area[b-lnp38eoik9]  .cc-freeze table {
    width: max-content;
    border-collapse: separate;
}

/* MudBlazor paints sticky cells background-gray, and pm-grid's row hover is a see-through tint. A frozen cell takes the surface
   colour instead, with the row's stripe or hover tint laid over it, so it matches its row and nothing scrolls through it. */
.main-content-area[b-lnp38eoik9]  .cc-freeze .mud-table-row > .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-surface) !important;
}

.main-content-area[b-lnp38eoik9]  .cc-freeze.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) > .mud-table-cell.sticky-left {
    background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped));
}

.main-content-area[b-lnp38eoik9]  .cc-freeze.mud-table-hover .mud-table-body .mud-table-row:hover > .mud-table-cell.sticky-left {
    background-image: linear-gradient(var(--pm-grid-row-hover-bg), var(--pm-grid-row-hover-bg)),
                      linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

.main-content-area[b-lnp38eoik9]  .cc-freeze .mud-table-head .mud-table-cell.sticky-left:hover {
    background-image: linear-gradient(var(--pm-grid-header-hover-bg), var(--pm-grid-header-hover-bg));
}

/* The frozen edge, right of Item: a soft shadow the scrolled columns pass under. */
.main-content-area[b-lnp38eoik9]  .cc-freeze .mud-table-cell.cc-freeze-edge {
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.35);
}

/* The lines grid's empty message (env#346), on every screen size. MudBlazor centres it across the whole table, which is far wider
   than the grid (2300-3900 px), so it sat off-screen. It sticks to the visible left edge instead, and wraps at the grid's visible
   width: while the grid is empty it is the message's size container, so 100cqi is that width. On a desktop the frozen grid's
   container (above) is what scrolls sideways; on a phone the grid itself does, so there the empty grid's container stops being
   a scroll container (it has no rows to scroll) and the message sticks to the grid. */
.main-content-area[b-lnp38eoik9]  .mud-data-grid:has(.cc-empty) {
    container-type: inline-size;
}

.main-content-area[b-lnp38eoik9]  .mud-data-grid:not(.cc-freeze):has(.cc-empty) .mud-table-container {
    overflow: visible;
}

.main-content-area[b-lnp38eoik9]  .mud-table-empty-row .cc-empty {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100cqi;
    text-align: start;
}

/* A button in the grid (a notes pencil, a retry mark, Open, the row menu) shows nothing when it has keyboard focus: MudBlazor resets its
   outline, while inputs have their underline. Tab and the arrow keys (env#345) need to show where they are. :focus-visible, so a mouse
   click doesn't draw it. */
.main-content-area[b-lnp38eoik9]  .mud-table-body button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* While the page swaps the lines grid's rows (env#344: Show all lines, the lines search), ComponentLinesGrid adds `cc-lines-loading`
   and MudBlazor's progress bar runs under the header. The rows it is replacing dim and ignore clicks until the new ones land, so a
   switch that changes many rows shows it's working instead of looking frozen. On every screen size. */
.main-content-area[b-lnp38eoik9]  .cc-lines-loading .mud-table-body {
    opacity: 0.5;
    pointer-events: none;
}

/* MudBlazor's progress bar spans the whole table (2300-3900 px), so its moving part was off-screen nearly half the time (measured
   2026-11-05). While loading, the frozen grid is the bar's size container, and the bar sticks to the grid's visible left edge at its
   visible width, as the empty message above does. Only the frozen grid: on a phone the grid itself scrolls sideways, not the container
   the bar would stick to, so a pinned bar scrolled off-screen (measured at -900 px). A phone keeps the full-width bar and the dim rows. */
.main-content-area[b-lnp38eoik9]  .mud-data-grid.cc-freeze.cc-lines-loading {
    container-type: inline-size;
}

.main-content-area[b-lnp38eoik9]  .cc-freeze.cc-lines-loading .mud-table-loading .mud-progress-linear {
    position: sticky;
    left: 0;
    width: 100cqi;
}

/* Scrolled down, MudBlazor sticks the bar 39 px from the top, its one-line dense header, which put it across this grid's sort arrows.
   This header is two lines, 56 px (measured; the table's natural width means titles never wrap). !important beats MudBlazor's longer selector. */
.main-content-area[b-lnp38eoik9]  .cc-lines-loading .mud-table-loading {
    top: 56px !important;
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-lnp38eoik9] {
        position: relative;
    }

    .nav-drawer.open[b-lnp38eoik9] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-lnp38eoik9] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-lnp38eoik9] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-lnp38eoik9] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-lnp38eoik9] {
    display: none;
}
/* /Components/Tabs/DesignEngineering.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.designengineering-container[b-4rq2su83bp] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-4rq2su83bp] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-4rq2su83bp] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-4rq2su83bp] {
    width: 250px;
}

.nav-drawer.minimized[b-4rq2su83bp] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-4rq2su83bp] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-4rq2su83bp]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-4rq2su83bp]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-4rq2su83bp]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-4rq2su83bp] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-4rq2su83bp] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-4rq2su83bp]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-4rq2su83bp]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-4rq2su83bp]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-4rq2su83bp]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-4rq2su83bp]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-4rq2su83bp]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-4rq2su83bp]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Icon-only navigation when minimized */
.nav-icons[b-4rq2su83bp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-4rq2su83bp]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-4rq2su83bp]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-4rq2su83bp]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-4rq2su83bp]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-4rq2su83bp] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-4rq2su83bp] {
        position: relative;
    }

    .nav-drawer.open[b-4rq2su83bp] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-4rq2su83bp] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-4rq2su83bp] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-4rq2su83bp] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-4rq2su83bp] {
    display: none;
}
/* /Components/Tabs/FileExplorer.razor.rz.scp.css */
.content-area[b-1c1il5juxo] {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

.left-pane[b-1c1il5juxo] {
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
    overflow-x: auto;
    flex: none;
}

/* Mobile-friendly left pane styles */
.mobile-left-pane[b-1c1il5juxo] {
    position: absolute;
    width: 100% !important;
    height: 100%;
    z-index: 10;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-120%); /*  Start off-screen */
    transition: transform 0.3s ease-out;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

/*Class for open state */
.mobile-left-pane-open[b-1c1il5juxo] {
    transform: translateX(0); /*Slide In */ 
}

.main-body[b-1c1il5juxo] {
    background-color: var(--mud-palette-background);
    overflow-y: auto;
}

/* Mobile content area styles */
.mobile-content-area[b-1c1il5juxo] {
    position: relative;
    overflow: hidden;
}

.preview-pane[b-1c1il5juxo] {
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
    flex-shrink: 0;
}

.preview-resizer[b-1c1il5juxo] {
    width: 8px;
    background: linear-gradient(to left, var(--mud-palette-lines-default) 1px, transparent 1px, transparent calc(100% - 1px), var(--mud-palette-lines-default) calc(100% - 1px));
    position: relative;
    transition: background-color 0.2s;
    cursor: col-resize;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.preview-resizer:hover[b-1c1il5juxo],
.preview-resizer.dragging[b-1c1il5juxo] {
    background: linear-gradient(to left, var(--mud-palette-primary) 1px, rgba(var(--mud-palette-primary-rgb),0.1) 1px, rgba(var(--mud-palette-primary-rgb),0.1) calc(100% - 1px), var(--mud-palette-primary) calc(100% - 1px));
}

.preview-resizer .resizer-handle[b-1c1il5juxo] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    transition: opacity 0.2s;
}

.preview-resizer:hover .resizer-handle[b-1c1il5juxo],
.preview-resizer.dragging .resizer-handle[b-1c1il5juxo] {
    opacity: 1;
}

.preview-resizer .bi-grip-vertical[b-1c1il5juxo] {
    font-size: 1.2rem;
}


.resizer[b-1c1il5juxo] {
    width: 8px;
    background: linear-gradient(to right, var(--mud-palette-lines-default) 1px, transparent 1px, transparent calc(100% - 1px), var(--mud-palette-lines-default) calc(100% - 1px));
    position: relative;
    transition: background-color 0.2s;
    cursor: col-resize;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.resizer:hover[b-1c1il5juxo],
.resizer.dragging[b-1c1il5juxo] {
    background: linear-gradient(to right, var(--mud-palette-primary) 1px, rgba(var(--mud-palette-primary-rgb),0.1) 1px, rgba(var(--mud-palette-primary-rgb),0.1) calc(100% - 1px), var(--mud-palette-primary) calc(100% - 1px));
}

.resizer-handle[b-1c1il5juxo] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    transition: opacity 0.2s;
}

.resizer:hover .resizer-handle[b-1c1il5juxo],
.resizer.dragging .resizer-handle[b-1c1il5juxo] {
    opacity: 1;
}

/* Style for the body when resizing is in progress */
body.resizing[b-1c1il5juxo] {
    cursor: col-resize;
    user-select: none;
}

.resizer .bi-grip-vertical[b-1c1il5juxo] {
    font-size: 1.2rem;
    color: inherit;
}



.file-list-details[b-1c1il5juxo] {
    display: flex;
    flex-direction: column;
}

.header-bar[b-1c1il5juxo] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 1;
    font-size: 0.8rem;
}

.breadcrumb[b-1c1il5juxo] {
    background: transparent;
    margin: 0;
    padding: 0;
}


.accordion[b-1c1il5juxo] {
    margin: -0.5rem;
}

.accordion-item[b-1c1il5juxo] {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.accordion-item:first-of-type[b-1c1il5juxo] {
    border-top: none;
}

.accordion-item:last-of-type[b-1c1il5juxo] {
    border-bottom: none;
}

.accordion-button[b-1c1il5juxo] {
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.accordion-button[b-1c1il5juxo]::after {
    width: 0.875rem;
    height: 0.875rem;
    background-size: 0.875rem;
}

/* To allow file explorer top app bar dropdowns to flow over the mud-table sticky header */
.mud-table-container[b-1c1il5juxo]  .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    z-index: 0;
}

[b-1c1il5juxo] .mud-treeview .mud-treeview-item {
    min-height: 16px;
    margin: 0;
}

[b-1c1il5juxo] .mud-treeview .mud-treeview-item .tree-item-text {
    font-size: 0.75rem !important;
    line-height: 1;
}

[b-1c1il5juxo] .mud-treeview .mud-treeview-item-content {
    padding: 1px 1px 1px 0px;
    min-height: 16px;
    gap: 4px;
}

[b-1c1il5juxo] .mud-treeview .mud-treeview-item-arrow {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

/* Condensed favorites styling for desktop */
.favorite-item-condensed[b-1c1il5juxo] {
    font-size: 0.75rem;
    line-height: 1;
}

.favorite-item[b-1c1il5juxo] {
    display: flex;
    align-items: center;
}
.favorite-item:hover[b-1c1il5juxo] {
   background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

[b-1c1il5juxo] .mud-list-item.py-0 {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 24px;
}

[b-1c1il5juxo] .mud-treeview .mud-treeview-item-icon {
    font-size: 1rem;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

[b-1c1il5juxo] .mud-treeview-item-content .mud-icon-root {
    font-size: 1rem;
}

[b-1c1il5juxo] .mud-treeview-item-group {
    padding-left: 16px;
    margin: 0;
}

/* Mobile specific accordion and tree styles */
.file-explorer-component.mobile .accordion-button[b-1c1il5juxo] {
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.file-explorer-component.mobile .accordion-button[b-1c1il5juxo]::after {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview .mud-treeview-item {
    min-height: 32px;
    margin: 4px 0;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview .mud-treeview-item .tree-item-text {
    font-size: 1.125rem !important;
    line-height: 1.3;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview .mud-treeview-item-content {
    padding: 6px 4px;
    min-height: 32px;
    gap: 8px;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview .mud-treeview-item-arrow {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview .mud-treeview-item-icon {
    font-size: 1.4rem;
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview-item-content .mud-icon-root {
    font-size: 1.4rem;
}

.file-explorer-component.mobile[b-1c1il5juxo]  .mud-treeview-item-group {
    padding-left: 24px;
}

[b-1c1il5juxo] .file-grid-item {
    user-select: none;
}

[b-1c1il5juxo] .file-grid-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.dummy-file-grid-item[b-1c1il5juxo] {
    width: 85px;
    margin-bottom: 0.5rem;
    user-select: none;
    border-radius: 6px;
    padding: 0px 5px;
}

/*.file-grid-item .bi-folder-fill {
    color: var(--mud-palette-warning);
}

.file-grid-item .bi-file-earmark-fill {
    color: var(--mud-palette-primary);
}*/

/*.file-grid-name {
    font-size: 0.75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;*/
    /* white-space: nowrap; */
    /*width: 100%;
    max-width: 80px;
    margin-bottom: 5px;
}*/

/* Table view icons */
.file-table-icon[b-1c1il5juxo] {
    display: inline-block;
    width: 1.3rem;
    text-align: center;
    margin-right: 0.4rem;
}
.file-table-icon .bi[b-1c1il5juxo] {
    font-size: 1.1rem;
    vertical-align: middle;
}
.file-table-icon .bi-folder-fill[b-1c1il5juxo] {
    color: var(--mud-palette-warning);
}
.file-table-icon .bi-file-earmark-fill[b-1c1il5juxo] {
    color: var(--mud-palette-primary);
}

/* MudTable fixed header styles */
.file-list-details[b-1c1il5juxo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table-container[b-1c1il5juxo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table[b-1c1il5juxo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-table-container .mud-table-head[b-1c1il5juxo] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mud-table-container .mud-table-body[b-1c1il5juxo] {
    flex: 1;
    overflow-y: auto;
}

/* CUI (Controlled Unclassified Information) row tint in the file list grid.
   ::deep is required because the rows are rendered by the child MudDataGrid component. */
.mud-table-container[b-1c1il5juxo]  .cui-row td {
    background-color: rgba(var(--mud-palette-error-rgb), 0.08);
}
/* /Components/Tabs/InventoryControl.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.inv-control-container[b-00wbjigup3] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-00wbjigup3] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-00wbjigup3] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-00wbjigup3] {
    width: 250px;
}

.nav-drawer.minimized[b-00wbjigup3] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-00wbjigup3] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-00wbjigup3]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-00wbjigup3]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-00wbjigup3]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-00wbjigup3] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-00wbjigup3] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-00wbjigup3]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-00wbjigup3]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-00wbjigup3]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-00wbjigup3] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-00wbjigup3] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-00wbjigup3]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-00wbjigup3]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-00wbjigup3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-00wbjigup3]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-00wbjigup3]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-00wbjigup3]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-00wbjigup3]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-00wbjigup3] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-00wbjigup3] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-00wbjigup3] {
        position: relative;
    }
    
    .nav-drawer.open[b-00wbjigup3] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-00wbjigup3] {
        width: 60px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-00wbjigup3] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-00wbjigup3] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-00wbjigup3] {
    display: none;
}
/* /Components/Tabs/LabelPrinter.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.label-printer-container[b-wxn0gkftde] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-wxn0gkftde] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Navigation Drawer */
.nav-drawer[b-wxn0gkftde] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-wxn0gkftde] {
    width: 250px;
}

.nav-drawer.minimized[b-wxn0gkftde] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-wxn0gkftde] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-wxn0gkftde]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-wxn0gkftde]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-wxn0gkftde]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-wxn0gkftde] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-wxn0gkftde] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-wxn0gkftde]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-wxn0gkftde]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-wxn0gkftde]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-wxn0gkftde] {
    font-weight: 500;
}

/* Nav Group Headers */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-wxn0gkftde]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-wxn0gkftde]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-wxn0gkftde] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-wxn0gkftde]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-wxn0gkftde]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-wxn0gkftde]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-wxn0gkftde]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-wxn0gkftde] {
    width: 40px;
}

/* Group header - clickable button that toggles sub-pill visibility */
.nav-icons-group-header[b-wxn0gkftde] {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    margin-bottom: 2px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    font-family: inherit;
    padding: 0;
}

.nav-icons-group-header:hover[b-wxn0gkftde] {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nav-icons-group-header[b-wxn0gkftde]  .group-chevron {
    font-size: 0.95rem !important;
    opacity: 0.7;
}

.nav-icons-group-header:hover[b-wxn0gkftde]  .group-chevron {
    opacity: 1;
}

/* Pill button for collapsed-view sub-label nav (V-2123 etc.) */
.nav-pill-button[b-wxn0gkftde] {
    appearance: none;
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    width: 44px;
    height: 28px;
    padding: 0 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-pill-button:hover[b-wxn0gkftde] {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-secondary);
    transform: scale(1.05);
}

.nav-pill-button.selected[b-wxn0gkftde] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.nav-pill-button.selected:hover[b-wxn0gkftde] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-wxn0gkftde] {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--mud-palette-background);
}

/* Label form header styling */
[b-wxn0gkftde] .label-form-header {
    border-radius: 8px;
    background: linear-gradient(to right, rgba(var(--mud-palette-primary-rgb), 0.06), transparent 60%);
    border-left: 4px solid var(--mud-palette-primary);
}

/* Force uppercase on labelled fields (text-transform on the wrapper does not
   cascade to the inner <input> element in most browsers) */
[b-wxn0gkftde] .lp-uppercase-input input,
[b-wxn0gkftde] .lp-uppercase-input textarea {
    text-transform: uppercase !important;
}

/* Make the Print button clearly focused when reached via keyboard (Tab).
   :focus-visible only triggers for keyboard focus, not mouse clicks. */
[b-wxn0gkftde] .lp-print-button:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.35);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-wxn0gkftde] {
        position: relative;
    }

    .nav-drawer.open[b-wxn0gkftde] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-wxn0gkftde] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-wxn0gkftde] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-wxn0gkftde] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-wxn0gkftde] {
    display: none;
}
/* /Components/Tabs/Messenger.razor.rz.scp.css */
.topbar[b-gkc9o925qo] {
    height: 50px;
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}
/* In dark mode the sub-header sits on Surface (distinct from the main navy app bar above it);
   the white icons/labels stay legible on the dark surface. */
html[data-theme="dark"] .topbar[b-gkc9o925qo] {
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Main chat scroll area = recessed Background so message bubbles rise (WingMate direction). */
.chat-body[b-gkc9o925qo] {
    background-color: var(--mud-palette-background);
}

.chat-container[b-gkc9o925qo] {
    max-width: 1200px;
}

.input-message-container[b-gkc9o925qo] {
    max-width: 1240px;
}

#conversation-name[b-gkc9o925qo] {
    font-weight: 600;
    font-size: 1em;
}

.conversation-recipients[b-gkc9o925qo] {
    font-size: 0.8em;
}

/* The message composer is a Bootstrap .form-control, which stays white/dark-text
   and doesn't follow MudBlazor's data-theme. Re-skin it for dark mode so it sits
   on Surface with legible text (matches the .topbar treatment above). */
html[data-theme="dark"] #send-message-input[b-gkc9o925qo] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-theme="dark"] #send-message-input[b-gkc9o925qo]::placeholder {
    color: var(--mud-palette-text-secondary);
}

html[data-theme="dark"] #send-message-input:focus[b-gkc9o925qo] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-primary);
}


/* /Components/Tabs/MfgEng.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.mfgeng-container[b-pjdvvcvuo1] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-pjdvvcvuo1] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-pjdvvcvuo1] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-pjdvvcvuo1] {
    width: 250px;
}

.nav-drawer.minimized[b-pjdvvcvuo1] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-pjdvvcvuo1] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-pjdvvcvuo1]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-pjdvvcvuo1]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-pjdvvcvuo1]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-pjdvvcvuo1] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-pjdvvcvuo1] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-pjdvvcvuo1]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-pjdvvcvuo1]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-pjdvvcvuo1]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-pjdvvcvuo1] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-pjdvvcvuo1] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-pjdvvcvuo1]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-pjdvvcvuo1]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-pjdvvcvuo1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-pjdvvcvuo1]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-pjdvvcvuo1]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-pjdvvcvuo1]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-pjdvvcvuo1]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-pjdvvcvuo1] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-pjdvvcvuo1] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-pjdvvcvuo1] {
        position: relative;
    }

    .nav-drawer.open[b-pjdvvcvuo1] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-pjdvvcvuo1] {
        width: 60px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-pjdvvcvuo1] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-pjdvvcvuo1] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-pjdvvcvuo1] {
    display: none;
}
/* /Components/Tabs/PickingManager.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.picking-manager-container[b-rdmiclelem] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-rdmiclelem] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Navigation Drawer */
.nav-drawer[b-rdmiclelem] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-rdmiclelem] {
    width: 250px;
}

.nav-drawer.minimized[b-rdmiclelem] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-rdmiclelem] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-rdmiclelem]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-rdmiclelem]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-rdmiclelem]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-rdmiclelem] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-rdmiclelem] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-rdmiclelem]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-rdmiclelem]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-rdmiclelem]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-rdmiclelem] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-rdmiclelem] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-rdmiclelem]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-rdmiclelem]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-rdmiclelem] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-rdmiclelem]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-rdmiclelem]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-rdmiclelem]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-rdmiclelem]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-rdmiclelem] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-rdmiclelem] {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-rdmiclelem] {
        position: relative;
    }
    
    .nav-drawer.open[b-rdmiclelem] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-rdmiclelem] {
        width: 60px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-rdmiclelem] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-rdmiclelem] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-rdmiclelem] {
    display: none;
}
/* /Components/Tabs/Printers.razor.rz.scp.css */
/* Outer container - uses inline flex-column */

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-xnvi3wzuaj] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Navigation Drawer */
.nav-drawer[b-xnvi3wzuaj] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-xnvi3wzuaj] {
    width: 250px;
}

.nav-drawer.minimized[b-xnvi3wzuaj] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-xnvi3wzuaj] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-xnvi3wzuaj]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-xnvi3wzuaj]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-xnvi3wzuaj]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-xnvi3wzuaj] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-xnvi3wzuaj] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-xnvi3wzuaj]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-xnvi3wzuaj]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-xnvi3wzuaj]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-xnvi3wzuaj]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-xnvi3wzuaj]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Icon-only navigation when minimized */
.nav-icons[b-xnvi3wzuaj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-xnvi3wzuaj]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-xnvi3wzuaj]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-xnvi3wzuaj]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-xnvi3wzuaj]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-xnvi3wzuaj] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-xnvi3wzuaj] {
        position: relative;
    }
    
    .nav-drawer.open[b-xnvi3wzuaj] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-xnvi3wzuaj] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-xnvi3wzuaj] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-xnvi3wzuaj] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-xnvi3wzuaj] {
    display: none;
}
/* /Components/Tabs/ProductionSchedule.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.production-schedule-container[b-oeycwswa1y] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-oeycwswa1y] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-oeycwswa1y] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-oeycwswa1y] {
    width: 250px;
}

.nav-drawer.minimized[b-oeycwswa1y] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-oeycwswa1y] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-oeycwswa1y]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-oeycwswa1y]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-oeycwswa1y]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-oeycwswa1y] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-oeycwswa1y] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-oeycwswa1y]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-oeycwswa1y]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-oeycwswa1y]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-oeycwswa1y] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-oeycwswa1y] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-oeycwswa1y]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-oeycwswa1y]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-oeycwswa1y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-oeycwswa1y]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-oeycwswa1y]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-oeycwswa1y]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-oeycwswa1y]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-oeycwswa1y] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-oeycwswa1y] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-oeycwswa1y] {
        position: relative;
    }

    .nav-drawer.open[b-oeycwswa1y] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-oeycwswa1y] {
        width: 60px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-oeycwswa1y] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-oeycwswa1y] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-oeycwswa1y] {
    display: none;
}


/* ============================================================================================== */
/* Shared grid styling for both Production Control views.                                          */
/*                                                                                                 */
/* Lives on the TAB rather than on either view so the two grids cannot drift apart. Blazor scoped   */
/* CSS compiles `::deep .x` to `[scope] .x`, and this tab renders the wrapper both views are drawn  */
/* inside, so the rules reach a grid rendered by either child component.                           */
/* ============================================================================================== */
/* Grid styling for the Production Control schedule.

   Wrapped in ::deep because .ps-catalog-grid sits on the MudDataGrid's rendered root rather than on
   an element this component owns.

   The .column-header rule is the load-bearing one. MudDataGrid lays a header cell out as a ROW flex
   holding the title and the column-options control, so a narrow fixed-width column squeezes the
   title into a one-character-per-line column ("D / e / p / t"). Making it a vertical flex puts the
   title on its own line above the controls and lets it wrap like ordinary text. The same fix is
   applied to the Picking Manager schedule grid. */

[b-oeycwswa1y] .ps-catalog-grid {
    --pc-grid-header-bg: var(--mud-palette-background-gray);
    --pc-grid-header-border: var(--mud-palette-lines-default);
    --pc-grid-header-hover-bg: rgba(var(--mud-palette-primary-rgb), 0.08);
    --pc-grid-header-text: var(--mud-palette-text-primary);
    --pc-grid-row-hover-bg: rgba(var(--mud-palette-primary-rgb), 0.10);
    --pc-grid-cell-border: var(--mud-palette-lines-default);
}

/* --- Table width ------------------------------------------------------------------------------ */

/* Fill the available width, and scale out rather than leaving a band of dead space on a wide
   monitor: `width: 100%` lets the browser spread any surplus across the columns.

   `table-layout` stays at the browser default. `fixed` looks like the obvious way to make the table
   shrink as well as grow, but it is incompatible with this grid: MudDataGrid virtualizes its rows
   and derives nothing useful from the first one, so fixed layout hands the entire width to the first
   column and drops the rest. It renders as a single-column table.

   Shrinking below the columns' own widths is therefore a matter of choosing narrower columns, not of
   CSS -- which is why the declared widths below are as tight as the content allows. Under those, the
   container scrolls, and the floor here keeps that from starting earlier than it needs to. */
/* MudDataGrid writes `width: max-content` as an INLINE style on this element (it does so whenever
   ColumnResizeMode is set), which is why the table was sizing itself to its columns and ignoring the
   container in both directions -- no stylesheet rule can outrank an inline style without
   `!important`. Overriding it is what actually lets `width: 100%` on the table mean anything. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-container {
    overflow-x: auto;
    width: 100% !important;
}

/* The floor must clear the sum of the declared column widths, or the columns squeeze instead of the
   container scrolling. Raised from 1280px to 1460px on 2026-09-14 with the Planning date column. */
[b-oeycwswa1y] .ps-catalog-grid table {
    min-width: var(--pc-grid-min-width, 1460px);
    width: 100%;
}

/* The Discrepancies grid carries half as many columns, so it needs a smaller floor of its own --
   inheriting the schedule grid's would force a scrollbar onto a table that fits comfortably. */
[b-oeycwswa1y] .ps-discrepancy-grid {
    --pc-grid-min-width: 900px;
}

/* --- Header cell ----------------------------------------------------------------------------- */

/* Translucent rather than solid: the header is sticky, so rows slide underneath it, and letting a
   little of that through makes the scroll position legible without the header stopping being a
   header. The blur keeps the titles readable over whatever happens to be passing behind. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-head .mud-table-cell {
    backdrop-filter: blur(4px);
    background-color: color-mix(in srgb, var(--pc-grid-header-bg) 82%, transparent);
    border-bottom: 1.5px solid var(--pc-grid-header-border);
    color: var(--pc-grid-header-text);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
    vertical-align: top;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-head .mud-table-cell:hover {
    background-color: color-mix(in srgb, var(--pc-grid-header-hover-bg) 88%, transparent);
}

/* Stack the title above the filter controls instead of beside them. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
    width: 100%;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-header .sortable-column-header {
    align-items: center;
    color: var(--pc-grid-header-text);
    display: flex;
    font-weight: 600;
    gap: 4px;
    white-space: normal;
    width: 100%;
    word-break: normal;
}

/* Per-column filter row: compact, and always visible rather than hover-revealed. */
/* Sort arrow and filter funnel stay on ONE line. They are two ~20px buttons, and wrapping the second
   one onto its own line in the two narrowest columns grew the header for the whole grid — which is
   the header row the per-column filters were supposed to avoid adding. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-header .column-options {
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-end;
    margin-top: 1px;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .sort-direction-icon {
    opacity: 0.35;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .sort-direction-icon.mud-direction-asc,
[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .sort-direction-icon.mud-direction-desc {
    opacity: 1;
}

/* --- Body cells ------------------------------------------------------------------------------ */

[b-oeycwswa1y] .ps-catalog-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--pc-grid-cell-border);
    line-height: 1.25;
    vertical-align: middle;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: var(--pc-grid-row-hover-bg) !important;
}

/* Reason chips wrap inside their cell rather than widening the column. */
[b-oeycwswa1y] .ps-catalog-grid .mud-chip {
    margin: 1px;
    max-width: 100%;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Minimized drawer: let the discrepancy badge show ------------------------------------------ */

/* The badge hangs off the top-right corner of a 44px icon button inside a 60px rail, so it lands on
   the drawer's own edge. Both the drawer and its content scroll vertically, and a scroll container
   clips on BOTH axes whatever `overflow-x` says — which cut the badge in half.
   Minimized, the rail holds two icons and has nothing to scroll, so visible overflow costs nothing
   and is the only thing that actually lets the badge escape the box. The z-index puts it over the
   content area rather than under it. */
.nav-drawer.minimized[b-oeycwswa1y] {
    overflow: visible;
    z-index: 2;
}

.nav-drawer.minimized .nav-drawer-content[b-oeycwswa1y] {
    overflow: visible;
}

.nav-drawer.minimized .nav-icons[b-oeycwswa1y] {
    padding-right: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* Grid presentation                                                                              */
/*                                                                                                */
/* The table read as unfinished for five reasons, all of them styling rather than data: every cell */
/* was boxed, a dead band sat under the headers, rows changed height as chips wrapped, six chip    */
/* colours competed so none of them meant "look here", and the type was too small to scan.        */
/* ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Horizontal rules only. A grid of boxes reads as a spreadsheet dump; rules let the eye track
   across a row, which is how this table is actually used. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--pc-grid-cell-border);
    border-left: 0;
    border-right: 0;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-head .mud-table-cell {
    border-left: 0;
    border-right: 0;
}

/* Fixed row height. Ragged rows were the main reason the table felt unscannable -- the chip column
   wraps, and every wrap shoved the following rows out of rhythm. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-body .mud-table-row {
    height: 64px;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-body .mud-table-cell {
    line-height: 1.3;
    overflow: hidden;
}

/* Secondary line inside a cell: part number under the MO, workcenter under the operation. Carries
   the detail that used to need its own column. */
[b-oeycwswa1y] .ps-catalog-grid .ps-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-oeycwswa1y] .ps-catalog-grid .ps-mo {
    font-weight: 600;
}

[b-oeycwswa1y] .ps-catalog-grid .ps-late {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

[b-oeycwswa1y] .ps-catalog-grid .ps-dash {
    color: var(--mud-palette-text-disabled);
}

/* Numbers line up so a column can be compared without reading every value. */
[b-oeycwswa1y] .ps-catalog-grid .ps-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The reason chips are the cell's whole point, and clicking anywhere in it opens the full account. */
/* Sized for exactly two chips, which is what the cell now renders at most. It was capped at 44px
   while up to three chips could stack, so the second one clipped on most rows. */
[b-oeycwswa1y] .ps-catalog-grid .ps-why {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 52px;
    overflow: hidden;
}

/* Slightly tighter chips here than elsewhere, so two fit the row without making it taller still. */
[b-oeycwswa1y] .ps-catalog-grid .ps-why .mud-chip {
    height: 22px;
    margin: 0;
}

/* ── Filter chips ─────────────────────────────────────────────────────────────────────────────── */

[b-oeycwswa1y] .ps-filter-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-oeycwswa1y] .ps-filter-divider {
    align-self: stretch;
    border-left: 1px solid var(--mud-palette-lines-default);
    margin: 2px 2px;
}

[b-oeycwswa1y] .ps-filter-chip {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

/* Excluded chips keep their count -- you should be able to see what you are hiding -- but stop
   competing for attention. */
[b-oeycwswa1y] .ps-filter-chip.is-off {
    opacity: 0.55;
}

[b-oeycwswa1y] .ps-filter-chip.is-off:hover {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    [b-oeycwswa1y] .ps-filter-chip {
        transition: none;
    }
}

/* Lateness under a due date, in both grids. What people act on is how late it is, not the date --
   a bare date makes them do the arithmetic themselves. */
[b-oeycwswa1y] .ps-late-sub {
    color: var(--mud-palette-warning-darken);
    font-size: 0.72rem;
    font-weight: 600;
}

[b-oeycwswa1y] .ps-late-sub.is-today {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

/* ── The "Show work due" select ────────────────────────────────────────────────────────────────── */

/* Pinned to a fixed width, and explicitly not a flexible flex item.
 *
 * MudBlazor's .mud-input-control is width:100%, so a `min-width` alone only sets a floor -- inside
 * the header's flex row the control stretched to whatever space happened to be free. That space
 * changes whenever the operation count or the freshness chips change width, so the select resized
 * itself between renders (measured at 172px and then 413px with nothing else changed), and the
 * filter chips reflowed onto a new line each time. That is what made it feel broken. */
/* The width is pinned on a plain wrapper div rather than on the MudSelect, because MudSelect puts
 * its Class on an INNER element -- constraining that left the outer .mud-select wrapper still
 * stretching, so the control was 178px inside a 416px box. The wrapper owns the width; everything
 * inside fills it. */
[b-oeycwswa1y] .ps-horizon-wrap {
    flex: 0 0 auto;
    width: 178px;
}

[b-oeycwswa1y] .ps-horizon-wrap .mud-select,
[b-oeycwswa1y] .ps-horizon-wrap .mud-input-control {
    width: 100%;
}

/* Search sits on the right of the filter strip, opposite the quick filters. Fixed width for the
 * same reason the horizon select needs one -- a flex item with only a max-width still stretches. */
[b-oeycwswa1y] .ps-search {
    flex: 0 0 auto;
    width: 300px;
}

/* ── Filter bar: quick filters left, actions right, always on the same line ────────────────────── */

[b-oeycwswa1y] .ps-filter-bar {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

/* Chips wrap inside their own box rather than pushing the actions onto a new line. */
[b-oeycwswa1y] .ps-filter-chips {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

[b-oeycwswa1y] .ps-filter-actions {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
}

/* The unsaved-urgent controls sit under the search rather than beside it, so appearing and
   disappearing does not shove the search box sideways. */
[b-oeycwswa1y] .ps-urgent-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

/* ── Header status line ────────────────────────────────────────────────────────────────────────── */

/* Controls and their status stack together on the right of the header. */
/* flex: 0 0 auto so the group takes its natural width and the MudSpacer absorbs what is left.
   Without it the spacer competed for the same space and squeezed the controls into two lines. */
[b-oeycwswa1y] .ps-header-controls {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
}

[b-oeycwswa1y] .ps-header-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

/* Timestamps are a footnote to the refresh buttons, not a row of chips competing with the filters.
   Same muted treatment as the row count above the table. */
[b-oeycwswa1y] .ps-header-status {
    align-items: baseline;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.72rem;
    gap: 5px;
    justify-content: flex-end;
    line-height: 1.4;
}

[b-oeycwswa1y] .ps-status-item {
    white-space: nowrap;
}

[b-oeycwswa1y] .ps-status-sep {
    opacity: 0.5;
}

/* Only the AGE takes colour, and only once it is late enough to mean something. */
[b-oeycwswa1y] .ps-status-ok {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

[b-oeycwswa1y] .ps-status-warn {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

[b-oeycwswa1y] .ps-status-bad {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ── Row count above the table ─────────────────────────────────────────────────────────────────── */

/* The count is the grid's toolbar (ui#272), because only the grid knows how many rows its search and
   column filters leave. MudToolBar is a 56-64px bar with 16-24px gutters; flattened here to the one
   line it replaced, at the same left edge and height, so GridHeightPx's header reserve still holds.
   The toolbar sits inside the grid's card, so it takes the page's background (.main-content-area's)
   rather than the card's: the line still reads as sitting above the table, not in it. */
[b-oeycwswa1y] .ps-catalog-grid > .mud-table-toolbar {
    background-color: var(--mud-palette-background);
    height: auto;
    min-height: 0;
    padding: 0;
}

[b-oeycwswa1y] .ps-showing {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    margin-bottom: 4px;
}

/* ── Per-column filter controls ─────────────────────────────────────────────────────────────────
   The funnels sit in the existing header alongside the sort arrows (FilterMode.ColumnFilterMenu).
   ColumnFilterRow would have put them in a second header row, which is what we were avoiding. */

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-options .mud-button-root {
    height: 22px;
    min-height: 22px;
    min-width: 22px;
    padding: 0;
    width: 22px;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-options .mud-icon-root {
    font-size: 0.95rem;
}

/* An inactive funnel is an affordance, not information; an ACTIVE one is the reason the grid is
   showing what it is showing, so it takes the accent. */
[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-options .mud-button-root {
    opacity: 0.45;
    transition: opacity 120ms ease;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell:hover .column-options .mud-button-root,
[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-options .mud-button-root:focus-visible {
    opacity: 1;
}

[b-oeycwswa1y] .ps-catalog-grid .mud-table-cell .column-options .filter-button.filter-applied {
    color: var(--mud-palette-primary);
    opacity: 1;
}

/* ── Filter menus (department, where-from) ───────────────────────────────────────────────────────
   Both used to lay their contents out with inline utility classes, which is how the where-from list
   ended up horizontal: its checkboxes were wrapped in MudTooltip, and that renders inline. */

[b-oeycwswa1y] .ps-filter-menu {
    min-width: 260px;
    padding: 6px 4px;
}

[b-oeycwswa1y] .ps-filter-menu-actions {
    display: flex;
    gap: 4px;
    padding: 0 8px;
}

[b-oeycwswa1y] .ps-filter-menu-list {
    max-height: 380px;
    overflow-y: auto;
}

/* One row per item, always. */
[b-oeycwswa1y] .ps-filter-menu-item {
    display: block;
}

[b-oeycwswa1y] .ps-filter-menu-help {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    line-height: 1.3;
}

/* A picking group with nobody on. Amber rather than red: the work is not broken, it just cannot
   start — and marking it urgent will not change that until somebody clocks on. */
[b-oeycwswa1y] .ps-no-pickers {
    color: var(--mud-palette-warning-darken);
    font-weight: 500;
}
/* /Components/Tabs/ShopPackets.razor.rz.scp.css */
/* Outer container - sizing is applied inline via the layout service */
.shop-packets-container[b-uk64gtd04x] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-uk64gtd04x] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Navigation Drawer */
.nav-drawer[b-uk64gtd04x] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-uk64gtd04x] {
    width: 250px;
}

.nav-drawer.minimized[b-uk64gtd04x] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-uk64gtd04x] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-uk64gtd04x]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-uk64gtd04x]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-uk64gtd04x]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-uk64gtd04x] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-uk64gtd04x] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-uk64gtd04x]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-uk64gtd04x]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-uk64gtd04x]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-uk64gtd04x]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-uk64gtd04x]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Top-level navigation items */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-uk64gtd04x] {
    font-weight: 500;
}

/* Dividers */
.nav-drawer-content[b-uk64gtd04x]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-uk64gtd04x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

.nav-icons[b-uk64gtd04x]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-uk64gtd04x]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-uk64gtd04x]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-uk64gtd04x]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Main Content Area */
.main-content-area[b-uk64gtd04x] {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--mud-palette-background);
}

/* Print view fills the tab body exactly - no page-level vertical scrolling */
.main-content-area.print-mode[b-uk64gtd04x] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ─────────────── Print view: compose (1/3) | preview (2/3) ─────────────── */
.print-layout[b-uk64gtd04x] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Left column - compose batch inputs, stacked. Scrolls internally when
   alerts/results make it taller than the tab body. */
.compose-pane[b-uk64gtd04x] {
    flex: 1 1 0;
    min-width: 280px;
    max-width: 420px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Right column - roughly 2/3 of the width, reserved for the PDF preview */
.preview-pane[b-uk64gtd04x] {
    flex: 2 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The result table gets narrow in the left column - let it scroll sideways */
.result-table-scroll[b-uk64gtd04x] {
    overflow-x: auto;
    max-width: 100%;
}

/* Preview master-detail body: fills whatever the header/footer leave behind */
.preview-body[b-uk64gtd04x] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Proportional so the PDF keeps the lion's share of the pane on smaller screens */
.preview-mo-list[b-uk64gtd04x] {
    width: clamp(150px, 22%, 240px);
    flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.preview-detail[b-uk64gtd04x] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* PDF viewer wrapper - takes all remaining height so Height="100%" resolves */
.preview-viewer[b-uk64gtd04x] {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

/* ── Narrow screens: stack compose above preview and allow the page to scroll.
      Kept low (900px) so ordinary laptop widths keep the side-by-side, no-scroll layout. ── */
@media (max-width: 900px) {
    .main-content-area.print-mode[b-uk64gtd04x] {
        overflow-y: auto;
    }

    .print-layout[b-uk64gtd04x] {
        flex-direction: column;
    }

    .compose-pane[b-uk64gtd04x] {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        overflow: visible;
    }

    .preview-pane[b-uk64gtd04x] {
        flex: 0 0 auto;
        min-height: 70vh;
    }
}

/* ── Very narrow: put the MO list above the viewer instead of beside it ── */
@media (max-width: 700px) {
    .preview-body[b-uk64gtd04x] {
        flex-direction: column;
    }

    .preview-mo-list[b-uk64gtd04x] {
        width: 100%;
        max-width: none;
        max-height: 160px;
    }

    .preview-detail[b-uk64gtd04x] {
        min-height: 50vh;
    }
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-uk64gtd04x] {
        position: relative;
    }

    .nav-drawer.open[b-uk64gtd04x] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    .nav-drawer.minimized[b-uk64gtd04x] {
        width: 60px;
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-uk64gtd04x] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-uk64gtd04x] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-uk64gtd04x] {
    display: none;
}
/* /Components/Tabs/Shortages.razor.rz.scp.css */
/* Outer container - uses inline flex-column */
.shortages-container[b-txbi9abjn1] {
}

/* Content area - horizontal layout for sidebar + main content */
.content-area[b-txbi9abjn1] {
    display: flex;
    flex: 1;
}

/* Navigation Drawer */
.nav-drawer[b-txbi9abjn1] {
    flex: none;
    border-right: 1px solid var(--mud-palette-divider);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-drawer.open[b-txbi9abjn1] {
    width: 250px;
}

.nav-drawer.minimized[b-txbi9abjn1] {
    width: 60px;
}

/* Drawer Header */
.nav-drawer-header[b-txbi9abjn1] {
    padding: 12px 16px;
    border-bottom: 2px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    background: linear-gradient(to bottom, var(--mud-palette-surface), rgba(var(--mud-palette-surface-rgb), 0.95));
}

.nav-drawer-header[b-txbi9abjn1]  .mud-typography {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.5px;
}

.nav-drawer-header[b-txbi9abjn1]  .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-header[b-txbi9abjn1]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Center header content when drawer is minimized */
.nav-drawer.minimized .nav-drawer-header[b-txbi9abjn1] {
    justify-content: center;
    padding: 12px 8px;
}

/* Drawer Content */
.nav-drawer-content[b-txbi9abjn1] {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Navigation Menu Styling */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-link {
    border-radius: 6px;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

/* Selected Navigation Items - Custom Class */
.nav-drawer-content[b-txbi9abjn1]  .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-txbi9abjn1]  .nav-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected items */
.nav-drawer-content[b-txbi9abjn1]  .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* MudBlazor's built-in selected state - override with subtle styling */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-link-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
}

/* Top-level navigation items (not in groups) */
.nav-drawer-content > .mud-navmenu > .mud-nav-item > .mud-nav-link[b-txbi9abjn1] {
    font-weight: 500;
}

.nav-drawer-content > .mud-navmenu > .mud-nav-item:last-child > .mud-nav-link[b-txbi9abjn1] {
    color: var(--mud-palette-text-secondary);
}

/* Nav Group Headers */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group {
    margin: 8px 0;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 6px;
    margin: 4px 4px;
    border-left: 3px solid var(--mud-palette-primary);
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Nav Group Items (children) */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 12px;
    padding-left: 24px;
    font-size: 0.875rem;
    background-color: transparent;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    padding-left: 28px;
    transition: all 0.2s ease;
}

/* Selected items within nav groups */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .nav-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    margin-right: 8px !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    border-radius: 0 6px 6px 0 !important;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .nav-selected:hover {
    padding-left: 24px !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
}

/* Icon color for selected sub-menu items */
.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .nav-selected .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.nav-drawer-content[b-txbi9abjn1]  .mud-nav-group .mud-nav-link-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-primary);
    font-weight: 500;
    margin-left: 12px;
}

/* Dividers */
.nav-drawer-content[b-txbi9abjn1]  .mud-divider {
    margin: 8px 12px;
    opacity: 0.6;
}

/* Icon-only navigation when minimized */
.nav-icons[b-txbi9abjn1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
}

/* Style icon buttons in minimized view */
.nav-icons[b-txbi9abjn1]  .mud-icon-button {
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
}

.nav-icons[b-txbi9abjn1]  .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active icon button in minimized view */
.nav-icons[b-txbi9abjn1]  .mud-icon-button.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
}

.nav-icons[b-txbi9abjn1]  .mud-icon-button.mud-primary-text:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Adjust dividers in minimized view */
.nav-drawer.minimized .nav-icons .mud-divider[b-txbi9abjn1] {
    width: 40px;
}

/* Main Content Area */
.main-content-area[b-txbi9abjn1] {
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

/* Mobile Styles */
@media (max-width: 960px) {
    .content-area[b-txbi9abjn1] {
        position: relative;
    }

    .nav-drawer.open[b-txbi9abjn1] {
        position: absolute;
        height: 100%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Keep minimized drawer visible on narrow screens */
    .nav-drawer.minimized[b-txbi9abjn1] {
        width: 60px; /* Same as desktop */
        position: relative;
    }
}

/* Smooth transitions */
.nav-drawer *[b-txbi9abjn1] {
    transition: opacity 0.2s ease;
}

.nav-drawer.minimized .mud-navmenu[b-txbi9abjn1] {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer.open .nav-icons[b-txbi9abjn1] {
    display: none;
}
/* /Components/Tabs/Viewer.razor.rz.scp.css */
.viewer-container[b-8tzseplb3f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.iframe-container[b-8tzseplb3f] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

#viewerIframe[b-8tzseplb3f] {
    border: none;
}

.fab-container[b-8tzseplb3f] {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 100;
}

.fab-container-microsoft-web-part[b-8tzseplb3f] {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 100;
}

.fab-container-mobile[b-8tzseplb3f] {
    position: absolute;
    top: 5px;
    right: 18px;
    z-index: 100;
}

    /* Make the FAB semi-transparent when not hovered */
    .fab-container :deep(.mud-button-root)[b-8tzseplb3f] {
        opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
    }

    .fab-container:hover :deep(.mud-button-root)[b-8tzseplb3f] {
        opacity: 1;
    }

/* Full-screen mode styles */
.fullscreen[b-8tzseplb3f] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background-color: var(--mud-palette-background);
}

.fullscreen .iframe-container[b-8tzseplb3f] {
    height: 100vh !important;
}

.fullscreen #viewerIframe[b-8tzseplb3f] {
    height: 100% !important;
    width: 100% !important;
}
/* /Components/Tabs/WorkCenterIdleTimes.razor.rz.scp.css */
/* Content sits in an elevated Surface card floating on the recessed Background (WingMate-style),
   instead of directly on the dark tab background. */
.header-bar[b-app0643l12] {
    background-color: var(--mud-palette-background);
}
.header-bar > .container[b-app0643l12] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    padding: 4px 20px 20px;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Idle-time bar chart — theme the Bootstrap progress track + bar to palette tokens
   so they adapt in light/dark instead of using Bootstrap's fixed grey well and blue. */
.progress[b-app0643l12] {
    background-color: var(--mud-palette-background-grey);
}

/* Bootstrap's .bg-primary utility is declared !important, so the override must be too.
   Maps the idle bars off Bootstrap blue (#0d6efd) onto the Tronair brand primary. */
.progress-bar.bg-primary[b-app0643l12] {
    background-color: var(--mud-palette-primary) !important;
}
/* /Components/Tabs/XaTransactionQueue.razor.rz.scp.css */
/* XA Transaction Queue — layout rules that depend on viewport width.
   Desktop keeps the wide 14-column table; below 960px the table switches to MudTable's stacked
   small-device mode and the rules here make each stacked record read like a card.
   Breakpoint mapping (MudBlazor 8.11 stylesheet): MudTable Breakpoint.Sm stacks at max-width 960px,
   Breakpoint.Md at 1280px. The razor uses Breakpoint.Sm and CompactBelowPx = 960 so that the
   stacked mode, the compact column set and these media queries all flip at the same width. */

.xaq-root[b-z4hm9dzfnd] {
    box-sizing: border-box;
}

/* ── Desktop: give the wide table its room. Scoped to ≥960 so the pinned width never applies to
      the stacked layout, which is what made the page unusable on phones before. ── */
@media (min-width: 960px) {
    .xaq-root[b-z4hm9dzfnd]  .xaq-table {
        min-width: 2100px;
    }
}

/* ── Overdue retry rows (Retrying tab): a soft warning tint so they stand out from rows that are
      simply waiting for their scheduled redelivery. ── */
.xaq-root[b-z4hm9dzfnd]  .xaq-row-overdue > .mud-table-cell {
    background-color: var(--mud-palette-warning-hover);
}

/* ── Error text: two-line clamp used in compact mode instead of the hover tooltip (tooltips do not
      fire on touch). Full text is one tap away in the details dialog. ── */
.xaq-error-clamp[b-z4hm9dzfnd] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

/* ── Bulk action bar. Inline on desktop; on small screens it sticks to the bottom of the scroll
      container so the primary action sits under the thumb (the scanner apps' bottom-button
      convention). ── */
.xaq-action-bar[b-z4hm9dzfnd] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 6px 12px;
    background-color: var(--mud-palette-surface);
}

.xaq-action-bar.xaq-sticky[b-z4hm9dzfnd] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 8px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Stacked (small-device) mode: card treatment for each record ──
      MudTable turns each <tr> into a block and each <td> into a flex row with the column label as
      ::before content. We go one step further: the row becomes a wrapping flex container so the
      checkbox, the ID and the row-actions menu share one header line, and cells whose value is
      just "-" are hidden so the card only lists fields that carry information. */
@media (max-width: 959.98px) {
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 8px 4px;
        padding: 4px 8px 8px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
        background-color: var(--mud-palette-surface);
    }

    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .mud-table-cell {
        flex: 0 0 100%;
        border-bottom: none;
        padding: 3px 4px;
        min-height: 0;
    }

    /* Header line: [checkbox] [ID …] [actions]
       MudBlazor 8.11 renders the multi-select checkbox <td> as a bare .mud-table-cell with no
       modifier class and no data-label; it is the only cell without one, so that is the hook. */
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .mud-table-cell:not([data-label]) {
        flex: 0 0 auto;
        order: -3;
        padding: 0;
        margin-left: -8px;   /* MudCheckBox carries its own ripple padding; pull it to the card edge */
    }

    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .xaq-cell-id {
        flex: 1 1 auto;
        order: -2;
        justify-content: flex-start;
        gap: 6px;
    }

    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .xaq-cell-id .xaq-id-text {
        font-weight: 600;
    }

    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .xaq-cell-actions {
        flex: 0 0 auto;
        order: -1;
        padding: 0;
    }

    /* Fields with no value add nothing to a card. */
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .xaq-empty {
        display: none;
    }

    /* Data labels are the "left column" of the card. inline-block so min-width applies
       (generated ::before content is inline by default and ignores width). */
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-cell[data-label]::before {
        display: inline-block;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        min-width: 6.5em;
        font-size: 0.8rem;
    }

    /* The ID label sits inline in the header line; no column width there. Declared after the
       general label rule (same specificity) so it wins. */
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .mud-table-row > .xaq-cell-id[data-label]::before {
        min-width: 0;
        padding-right: 6px;
    }

    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-table-body .xaq-row-overdue {
        border-color: var(--mud-palette-warning);
    }

    /* Toolbar: let the title + selection buttons wrap tightly on a phone. */
    .xaq-root[b-z4hm9dzfnd]  .xaq-table .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 0;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}
/* /Components/Widgets/WeatherWidget.razor.rz.scp.css */
/* Widget is a Bootstrap .card sitting on the navy app bar. .card has no global
   theme rule, so map its surface to palette tokens (WingMate: cards -> surface). */
.weather-widget.card[b-aen9bvgagf] {
    --bs-card-bg: var(--mud-palette-surface);
    --bs-card-color: var(--mud-palette-text-primary);
    --bs-card-border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.location[b-aen9bvgagf] {
    font-size: 0.7rem;
}

.details[b-aen9bvgagf] {
    font-size: 0.7rem;
}