.shift-modal-background + .mud-dialog {
    overflow: hidden;
}

.shift-modal-background + .mud-dialog:not(.mud-dialog-fullscreen) {
    max-height: calc(100dvh - 64px);
}

.shift-modal-background + .mud-dialog .mud-dialog-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.shift-modal-background + .mud-dialog article[id^="Form-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.shift-modal-background + .mud-dialog .shift-form-paper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.shift-modal-background + .mud-dialog .shift-form-paper > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.shift-modal-background + .mud-dialog .shift-form-paper > header,
.shift-modal-background + .mud-dialog .shift-form-paper > form > footer {
    flex-shrink: 0;
}

.shift-scrollable-content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.mud-dialog:not(.shift-modal-background + .mud-dialog) .shift-scrollable-content-wrapper {
    max-height: calc(100vh - 175px);
}

.shift-toolbar-header > :last-child {
    margin-inline-end: -12px;
}

.user-avatar-dropdown .mud-list-item-icon {
    min-width: 40px;
}

.uploader-thumbnail svg {
    filter: drop-shadow(0 0 4px black);
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Single-line cell text: clip overflow to an ellipsis instead of wrapping to a new line.
   Applied to the data cell (td) so the column's inherited MudBlazor CellStyle/CellClass can customize it
   (e.g. CellStyle="max-width: 500px;"). max-width is required for the ellipsis to trigger inside the
   grid's auto-layout table; 320px is the default (overridable via the --shift-cell-max-width variable). */
.shift-cell-truncate {
    max-width: var(--shift-cell-max-width, 320px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The cell's full-text hover uses the native HTML title attribute (browser-rendered) instead of a
   MudTooltip — a per-cell Blazor component is too costly on large lists. The title lives on a plain
   inline <span> wrapping the cell content, so the cell's "…" ellipsis still renders. */

/* Single-line chip row with a trailing "+N" overflow indicator (see ShiftChipDisplay.razor).
   The component renders at most its first MaxVisible chips plus the "+N" chip — no measurement.
   These rules only keep the row on one line and ellipsize an over-long chip's label. */
.shift-chip-display {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    max-width: 100%;
}

/* Chips may SHRINK (flex-shrink 1): when the visible chips are collectively wider than the
   constrained host cell, each chip ellipsizes its label instead of trailing chips being clipped
   invisibly by the row's overflow:hidden. Every rendered chip therefore always stays visible. */
.shift-chip-display__item {
    flex: 0 1 auto;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}

.shift-chip-display__item .mud-chip {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* A programmer-supplied ChipTemplate may wrap its chip in a MudTooltip. Its inline-block activator
   wrapper sits between the item and the chip and refuses to shrink below the label's full width
   (flex min-width:auto), which would defeat the item's width cap and let a long chip overflow the
   row — let it shrink so the chip's own max-width/overflow take over. */
.shift-chip-display__item .mud-tooltip-root {
    min-width: 0;
    max-width: 100%;
}

/* Ellipsis for a chip whose label is wider than its cap. MudBlazor's .mud-chip-content is
   inline-flex, where text-overflow never draws the "…" — a block container restores it. MudBlazor
   also sets height:100% on it, which would pin block text to the top of the chip; height:auto lets
   the chip's own align-items:center re-center the line. The chip box also clips (overflow:hidden
   above) so an over-long chip can never blow out the row. */
.shift-chip-display__item .mud-chip .mud-chip-content {
    display: block;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.shift-chip-display__overflow {
    flex: 0 0 auto;
}

.shift-chip-display__more-chip {
    cursor: pointer;
}


.multi-select input.mud-input-root::placeholder {
    opacity: 1 !important;
}

.is-deleted {
    background-color: #ffc7c7;
}

.is-deleted:hover {
    background-color: #ffaeae !important;
}

.mud-data-grid .mud-table-row.is-selected .mud-table-cell {
    background-color: var(--mud-palette-gray-lighter);
}

.mud-data-grid .mud-table-row.is-selected:hover .mud-table-cell {
    background-color: var(--mud-palette-gray-light);
}

.mud-data-grid.nowrap .column-header {
    white-space: nowrap;
}

.button-column-button {
    color: var(--mud-palette-primary);
}

.button-column-button:hover {
    text-decoration: underline;
}

.mud-table-container {
    padding-bottom: 6px;
}

.foreign-column .filter-button.filtered {
    display: none;
}

.foreign-column .column-header {
    font-weight: 500;
    font-size: 14px;
}

.foreign-column .sortable-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shift-modal-background + .mud-dialog footer {
    box-shadow: 0 -5px 5px 0px #ffffff;
    position: relative;
}

.shift-modal-background + .mud-dialog header {
    box-shadow: 0 5px 5px 0px #ffffff;
    position: relative;
    z-index: 1;
}

.button-shortcut {
    position: relative;
    display: flex;
    flex-direction: column;
}

.shortcut-key {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    color: #fff;
    font-size: 14px;
    padding: 1px 5px;
    border-radius: 10px;
    display: none;
    opacity: 0.7;
    pointer-events: none;
}

.show-keys .shortcut-key {
    display: block;
}

.mud-table .mud-table-pagination {
    display: flex;
    align-items: center;
}

th.mud-table-cell.sticky-left, th.mud-table-cell.sticky-right {
    z-index: 5 !important;
    background-color: var(--mud-palette-background-gray) !important;
}

.shift-autocomplete {
    position: relative;
    flex-grow: 1;
}

.shift-autocomplete .autocomplete-tags {
    position: absolute;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    max-width: 100%;
}

.shift-autocomplete .mud-input-adornment-icon-button {
    z-index: 1;
}

/* hide the native upload button in SfFileManager because we have our own implementation */
.e-filemanager .e-toolbar-item[id$='upload'] {
    display: none !important;
}

.e-filemanager .e-fe-grid-icon[aria-label^="Directory"] ~ [aria-colindex="4"] {
    color: transparent !important;
}

.drop-area-active {
    border: 1px dashed blue;
}

.file-uploader-input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
    opacity: 0;
}

.file-uploader-progress-dialog {
    max-height: 85vh;
    max-width: 70vw;
    overflow-y: auto;
}

.file-uploader-progress-dialog .upload-list {
    padding: 20px;
}

/* ============== File Explorer ============== */

.selected-sort-item * {
    font-weight: 500 !important;
}

.file-explorer {
    --file-box-size: 150px;
    --file-icon-size: 100px;
    --file-icon-font-size: 96px;
}

.file-explorer .main-window {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.file-explorer .breadcrumb {
    white-space: nowrap;
}

    .file-explorer .breadcrumb .mud-typography {
        margin: 0 5px;
    }

    .file-explorer .breadcrumb .mud-button {
        min-width: initial;
    }

    .file-explorer .breadcrumb button:disabled {
        color: var(--mud-palette-text-primary) !important;
    }

.file-explorer .file-listing {
    overflow: auto;
    min-height: 200px;
}

    .file-explorer .file-listing.icons {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--file-box-size), 1fr));
        gap: 10px;
        padding: 20px;
        height: 100%;
        align-content: start;
    }

    .file-explorer .file-listing.small {
        --file-box-size: 400px;
        --file-icon-size: 25px;
        --file-icon-font-size: 24px;
    }

    .file-explorer .file-listing.medium {
        --file-box-size: 100px;
        --file-icon-size: 70px;
        --file-icon-font-size: 56px;
    }

    .file-explorer .file-listing.extra-large {
        --file-box-size: 200px;
        --file-icon-size: 150px;
        --file-icon-font-size: 146px;
    }

.file-explorer-item {
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    padding: 4px;
    position: relative;
}

.file-listing.icons .file-explorer-item {
    width: var(--file-box-size);
    height: var(--file-box-size);
}

.file-listing.icons.small .file-explorer-item {
    display: flex;
    align-items: center;
    height: 20px;
    gap: 6px;
}

.file-listing.icons .file-explorer-item .mud-icon-root,
.file-listing.icons .file-explorer-item .mud-image,
.file-listing.icons .file-explorer-item .material-symbols-outlined {
    height: var(--file-icon-size);
    width: var(--file-icon-size);
    font-size: var(--file-icon-size);
    user-select: none;
}

.file-explorer .mud-table tbody td:first-child .mud-icon-root,
.file-explorer .mud-table tbody td:first-child .mud-image,
.file-explorer .mud-table tbody td:first-child .material-symbols-outlined {
    height: 25px;
    width: 25px;
    font-size: 24px;
    vertical-align: middle;
    user-select: none;
}

.file-explorer-item p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.file-explorer-item:hover {
    background-color: #e8eaea;
}

.file-explorer-item.deleted,
.file-explorer .mud-table-row.deleted {
    background-color: #ffc7c7 !important;
}

.file-explorer-item.selected,
.file-explorer .mud-table-row.selected {
    background-color: #83b6f2 !important;
}

.file-explorer-item img {
    border-radius: 5px;
}

.file-explorer .quick-access-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-explorer .loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.file-explorer .no-files {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    grid-column: 1 / -1;
}

    .file-explorer .no-files .mud-icon-root {
        color: #f1ce69;
    }

.file-explorer .change-view .mud-menu .mud-button-root {
    width: 25px;
}

.file-explorer .context-menu {
    position: fixed;
}

.file-explorer .mud-table thead th:first-child {
    width: 100%;
}

.file-explorer .mud-table thead th:not(:first-child),
.file-explorer .mud-table tbody td:not(:first-child) {
    white-space: nowrap;
}

.file-explorer .mud-table .mud-table-container {
    padding: 0 !important;
}

.file-explorer .column-header .header-text {
    cursor: pointer;
    flex-grow: 1;
    display: flex;
}

.file-explorer .mud-table-row {
    cursor: pointer;
}

/* ============== File Explorer end ============== */

/* ================= Shift Input ================= */

.shift-input .shift-input-wrapper {
    align-items: center;
}

.shift-input .shift-input-wrapper.mud-input-text-with-label {
    margin-top: 16px;
}

.shift-input .shift-label {
    color: var(--mud-palette-text-secondary);
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.15rem;
    letter-spacing: .00938em;
    z-index: 1;
    pointer-events: none;
}

    .shift-input .shift-label.mud-input-label-outlined {
        background-color: #fff;
    }

    .shift-input .shift-label.mud-disabled {
        color: var(--mud-palette-text-disabled) !important;
    }

.shift-input .shift-input-wrapper:focus-within ~ label.shift-label {
    color: var(--mud-palette-primary);
}

/* =============== Shift Input End =============== */

.filter-input .percent-input {
    flex-grow: 0;
    width: 80px;
}

.filter-input .percent-input input {
    text-align: end;
}

.custom-date-range-picker > .mud-input-control-input-container > .mud-input > .mud-input-root {
    display: flex !important;
    flex-grow: 1 !important;
    z-index: 10 !important;
    padding-bottom: 0 !important;
}

.custom-date-range-picker > .mud-input-control-input-container > .mud-input > .mud-input-adornment {
    margin-left: -14px !important;
}

.mud-divider-vertical.shift-vertical-divider {
    height: 60%;
    align-self: center;
    margin-inline: 5px;
    opacity: 0.5;
}

.slide-down {
    display: grid;
    overflow: clip;
    grid-template-rows: 0fr;
    transition: grid-template-rows 350ms ease, opacity 250ms ease, transform 250ms ease, margin 250ms ease, opacity 250ms ease;
}
    .slide-down.show {
        grid-template-rows: 1fr;
    }

@starting-style {
    .slide-down.first-render.show {
        grid-template-rows: 0fr;
    }
}

    .slide-down > * {
        overflow: hidden;
    }


.menu-items-container  {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    /*        gap: 10px;*/
}

.menu-items-container .hide {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    opacity: 0;
}

.menu-items-container .menu-items {
    display: flex;
}

.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-list .list-item {
    position: relative;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border: 1px solid #ccc;
}

/* when moving up, slide it up slightly and fade */
.list-item.move-up {
    transition: transform 150ms ease-out, opacity 150ms ease-out;
    transform: translateY(-100%);
    opacity: 0.4;
}

/* when moving down, slide it down slightly and fade */
.list-item.move-down {
    transition: transform 150ms ease-out, opacity 150ms ease-out;
    transform: translateY(100%);
    opacity: 0.4;
}

/* ================= Image Viewer ================= */

.siv-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
}

.shift-image-viewer {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #111;
    color: #fff;
    outline: none;
    overflow: hidden;
}

.shift-image-viewer .siv-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.55);
    z-index: 3;
    flex-shrink: 0;
}

.shift-image-viewer .siv-toolbar .mud-button-root {
    color: #fff;
}

.shift-image-viewer .siv-title {
    font-weight: 500;
    margin-inline: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shift-image-viewer .siv-counter {
    opacity: 0.7;
    font-size: 0.85rem;
    white-space: nowrap;
}

.shift-image-viewer .siv-zoom-label {
    min-width: 48px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.85;
    white-space: nowrap;
}

.shift-image-viewer .siv-divider {
    margin-inline: 6px;
    border-color: rgba(255, 255, 255, 0.25);
}

.shift-image-viewer .siv-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.shift-image-viewer .siv-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.shift-image-viewer .siv-image.siv-zoomed {
    cursor: grab;
}

.shift-image-viewer .siv-image.siv-dragging {
    transition: none;
    cursor: grabbing;
}

.shift-image-viewer .siv-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #ddd;
    padding: 24px;
    text-align: center;
}

.shift-image-viewer .siv-file > .mud-icon-root {
    font-size: 120px;
}

.shift-image-viewer .siv-file-name {
    max-width: 80vw;
    word-break: break-word;
}

.shift-image-viewer .siv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #888;
}

.shift-image-viewer .siv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
}

.shift-image-viewer .siv-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.shift-image-viewer .siv-nav-prev {
    inset-inline-start: 12px;
}

.shift-image-viewer .siv-nav-next {
    inset-inline-end: 12px;
}

.shift-image-viewer .siv-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 3;
    flex-shrink: 0;
}

.shift-image-viewer .siv-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.shift-image-viewer .siv-thumb:hover {
    opacity: 0.85;
}

.shift-image-viewer .siv-thumb.active {
    opacity: 1;
    border-color: var(--mud-palette-primary);
}

.shift-image-viewer .siv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shift-image-viewer .siv-thumb .mud-icon-root {
    color: #999;
}

/* =============== Image Viewer End =============== */

/* =============== Attention System =============== */

tr:has(> td .attention-row--critical) > td {
    background: rgba(var(--mud-palette-error-rgb), 0.06);
    font-weight: 600;
}

tr:has(> td .attention-row--warning) > td {
    background: rgba(var(--mud-palette-warning-rgb), 0.06);
    font-weight: 600;
}

tr:has(> td .attention-row--info) > td {
    background: rgba(var(--mud-palette-info-rgb), 0.05);
    font-weight: 600;
}

.attention-inline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

.attention-inline-dot--critical {
    background: var(--mud-palette-error);
}

.attention-inline-dot--warning {
    background: var(--mud-palette-warning);
}

.attention-inline-dot--info {
    background: var(--mud-palette-info);
}

/* Inside a navigation link, the AttentionNavBadge always renders as a small count bubble.
   The bubble sits on the top-right corner of the link's icon. It looks the same when the
   drawer is open and when it is collapsed to its narrow icon-only (mini) state. The link is
   the positioning parent, because MudBlazor nav links have position: relative.
   inset-inline-start keeps the bubble on the icon side in right-to-left layouts. Outside a
   nav link, the badge renders as a normal inline pill. */
.mud-nav-link .attention-nav-badge.mud-chip.mud-chip-size-small {
    position: absolute;
    top: 4px;
    inset-inline-start: 28px;
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    padding: 0 5px;
    margin: 0;
    z-index: 1;
    /* This overrides any app rule that hides labels in the mini (collapsed) drawer state
       (see the wrapper rule below). It has no effect while the drawer is open. Note: a link
       inside a collapsed nav group stays hidden anyway. The group's collapse container clips
       its content by height, and that is intended. */
    visibility: visible !important;
}

/* In the mini (collapsed) drawer state, apps (and MudBlazor itself) hide the label wrapper
   with visibility: hidden, opacity: 0, or both, and with any specificity. These two
   properties behave differently. With visibility: hidden on a parent, a child can still set
   visibility: visible on itself and become visible. With opacity: 0 on a parent, the whole
   subtree becomes fully transparent, and no child rule can undo that. So when the wrapper
   contains a badge, this rule sets both properties again. The !important is on purpose: it
   must override the app's own styles. opacity: 1 makes the subtree visible again, and
   visibility: hidden keeps the label text invisible no matter which of the two properties
   the app used. The badge rule above then sets visibility: visible on the badge only.
   There is no way to work around display: none — if the app hides the wrapper that way,
   the badge stays hidden too. Hide mini-state labels with visibility or opacity instead. */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text:has(.attention-nav-badge) {
    opacity: 1 !important;
    visibility: hidden !important;
}

/* =============== Attention System End =============== */

/* =============== List Find =============== */

/* Its own slim row directly under .shift-toolbar-header, not an item inside it. The toolbar's
   contents differ per list — ToolbarStartTemplate can hold any number of action buttons — so a box
   placed in it landed somewhere different on every list and moved as buttons came and went.

   The row keeps the header's banner colour but is deliberately shorter than it, so the toolbar
   above stays the dominant band. justify-content (not a margin or float) docks the box to the
   row's end, which follows the reading direction — it lands on the left in an RTL culture
   without a second rule. */
:root {
    /* The bar is laid out outside the grid's height box, so ShiftList deducts this same length
       from the height it hands MudBlazor (see EffectiveHeight). It is a variable so the element
       and the arithmetic can never disagree — change one and both follow. */
    --shift-list-find-bar-height: 41px;
}

.shift-list-find-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: var(--shift-list-find-bar-height);
    box-sizing: border-box;
    padding: 4px 12px;
    border-top: 1px solid var(--mud-palette-table-lines);
}

/* Capped, not flexible: the box should stay the same width whatever else lands on this row. */
.shift-list-find {
    flex: 0 1 260px;
    min-width: 140px;
}

/* The field carries its own surface colour so it reads as somewhere to type rather than dissolving
   into the banner behind it. On the input row, not on the outline: MudBlazor's outline is an
   absolutely positioned fieldset drawn over this box, so painting that one would cover the field. */
.shift-list-find .mud-input.mud-input-outlined {
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

/* Two rules below trim the field well under the toolbar's height. Both name a MudBlazor class of
   their own on purpose: the rules they override have the same specificity and MudBlazor.min.css
   loads after this file, so without the extra class they would lose on source order. */

/* MudBlazor reserves vertical space under a dense field for helper text this box never shows. */
.shift-list-find .mud-input-control.mud-input-control-margin-dense {
    margin-block: 0;
}

/* A search box subordinate to the header does not need the input default's 16px text in a 40px
   field. The selector names the variant and margin the box is declared with because that is the
   pair of MudBlazor rules being outweighed; change the variant and the field simply reverts to
   MudBlazor's own sizing. */
.shift-list-find .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-block: 6px;
    font-size: 0.875rem;
}

/* MudBlazor's default 24px adornment suits its default 40px field; in the shorter one it very
   nearly fills the height. */
.shift-list-find .mud-input-adornment .mud-icon-root {
    font-size: 1.25rem;
}

/* Keeps the match count on one line so a narrow bar cannot wrap it under the box. */
.shift-list-find-count {
    white-space: nowrap;
    font-size: var(--mud-typography-body2-size);
    opacity: 0.75;
}

/* The scope warning. margin-inline-end:auto is what puts it at the start of an end-docked row:
   it absorbs the slack, so the count and the box stay pinned to the end and do not move when it
   appears. Amber rather than a muted grey on purpose — the failure it guards against is a user
   quietly concluding a record does not exist, so it has to survive being skimmed past. */
.shift-list-find-scope {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-end: auto;
    padding: 3px 8px;
    border-radius: var(--mud-default-borderradius);
    /* Mixed from MudBlazor's own warning hue rather than --mud-palette-warning-hover, which is a
       6% wash meant for hover feedback and is all but invisible as a standing badge. */
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
    color: var(--mud-palette-warning-darken);
    /* The grid's own body size. At 0.75rem it reads as a footnote next to the cells it is warning
       about, which is the wrong weight for the thing that stops a wrong conclusion. */
    font-size: var(--mud-typography-body2-size);
    line-height: 1.4;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

/* The same fact in the empty state, where it is a line of text rather than a chip. */
.shift-list-find-unsearched {
    color: var(--mud-palette-warning-darken);
    font-size: var(--mud-typography-body2-size);
}

/* The chip carries a full sentence now. Given room it shows all of it; squeezed, it clips to an
   ellipsis rather than pushing the box off its dock, and the title attribute still has the text. */
.shift-list-find-scope-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============== List Find End =============== */

/* Revision compare: the dialog is full screen, so the toolbar and the two revision headings stay
   put and only the panes scroll. Without this the whole dialog scrolls and the headings that say
   which revision you are looking at leave the screen. */
.shift-revision-compare-dialog + .mud-dialog .mud-dialog-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.shift-revision-compare {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.shift-revision-compare > .mud-toolbar {
    flex-shrink: 0;
}

.shift-revision-compare-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* A long diff should scroll inside the menu rather than run off the screen. */
.shift-revision-compare-fields {
    max-height: 60vh;
    overflow-y: auto;
}