@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.mlg14ggzcc.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Only the #blazor-error-ui element below exists in MainLayout.razor markup.
   The Blazor template leftovers (.page, .sidebar with its legacy gradient,
   .top-row, media queries) were dead CSS — the layout is MudBlazor
   (mud-appbar/mud-drawer, styled in wwwroot/app.css) — and were removed. */

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

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

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


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

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-4i1tin8svb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home dashboard — compact, fits 1920x1080 without vertical scrolling.
   Every colour is a theme token, so all five themes and dark mode work unchanged.
   The selectors go through ::deep because the classes sit on MudBlazor components, whose
   markup this component does not own and which therefore carry no scope attribute. */

.home-dashboard[b-80oohtvnrd]  .home-kpi {
    height: 100%;
}

/* The KPI tiles fill the row in equal parts, however many the caller's permissions show (one to
   five), and wrap by the space the content area really has — a viewport breakpoint would squeeze
   five tiles next to an open drawer. The MudGrid spacing (item padding) is kept. */
.home-dashboard[b-80oohtvnrd]  .home-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.home-dashboard[b-80oohtvnrd]  .home-kpi-row > .mud-grid-item {
    max-width: none;
}

.home-dashboard[b-80oohtvnrd]  .home-kpi-body {
    min-width: 0;
}

/* Five tiles next to the drawer leave a narrow tile, where a caption may wrap to two lines. */
.home-dashboard[b-80oohtvnrd]  .home-kpi-body .mud-typography-caption {
    display: block;
    line-height: 1.3;
}

.home-dashboard[b-80oohtvnrd]  .home-kpi-value {
    font-weight: 700;
    line-height: 1.2;
}

.home-dashboard[b-80oohtvnrd]  .home-kpi-link {
    cursor: pointer;
    transition: box-shadow 120ms ease-in-out;
}

.home-dashboard[b-80oohtvnrd]  .home-kpi-link:hover,
.home-dashboard[b-80oohtvnrd]  .home-kpi-link:focus-visible {
    box-shadow: var(--mud-elevation-4);
}

.home-dashboard[b-80oohtvnrd]  .home-card {
    height: 100%;
}

/* The lists are the part that would push the page past one screen, so they are capped and
   scroll internally instead of growing the document. */
.home-dashboard[b-80oohtvnrd]  .home-list {
    max-height: 244px;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 0;
}

/* My work items: the card already stops at WorkItemRows (7) and links "show all", and each row
   carries a project line (WI-06546) — a scroll cap here would hide rows behind a second scroll. */
.home-dashboard[b-80oohtvnrd]  .home-list--uncapped {
    max-height: none;
}

.home-dashboard[b-80oohtvnrd]  .home-row {
    padding-top: 4px;
    padding-bottom: 4px;
}

.home-dashboard[b-80oohtvnrd]  .home-row-bar {
    width: 3px;
    align-self: stretch;
    min-height: 18px;
    border-radius: var(--mud-default-borderradius);
    flex-shrink: 0;
}

/* WI-06546: the text of a work item row — its main line and the project line under it — next to
   the type bar, which runs down both lines. */
.home-dashboard[b-80oohtvnrd]  .home-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.home-dashboard[b-80oohtvnrd]  .home-row-project {
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.home-dashboard[b-80oohtvnrd]  .home-row-project-code {
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

.home-dashboard[b-80oohtvnrd]  .home-row-code {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.home-dashboard[b-80oohtvnrd]  .home-row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-dashboard[b-80oohtvnrd]  .home-row-state {
    flex-shrink: 0;
}

/* A phone row has room for code, title and due date only; the state is in the donut card. */
@media (max-width: 599.98px) {
    .home-dashboard[b-80oohtvnrd]  .home-row-state {
        display: none;
    }
}

.home-dashboard[b-80oohtvnrd]  .home-row-due {
    flex-shrink: 0;
    white-space: nowrap;
}

.home-dashboard[b-80oohtvnrd]  .home-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    text-align: center;
}
/* /Components/Pages/UserGuide.razor.rz.scp.css */
.user-guide[b-w8jybf9e6m] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.user-guide__toc[b-w8jybf9e6m] {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.user-guide__toc-group + .user-guide__toc-group[b-w8jybf9e6m] {
    margin-top: 16px;
}

.user-guide__toc-group-title[b-w8jybf9e6m] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.user-guide__toc ul[b-w8jybf9e6m] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.user-guide__toc li a[b-w8jybf9e6m] {
    display: block;
    padding: 3px 0 3px 8px;
    border-left: 2px solid transparent;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.user-guide__toc li a:hover[b-w8jybf9e6m] {
    border-left-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.user-guide__group-heading[b-w8jybf9e6m] {
    margin: 40px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.user-guide__section[b-w8jybf9e6m] {
    /* The sticky app bar would otherwise cover the heading a fragment jump lands on. */
    scroll-margin-top: 88px;
    margin-bottom: 32px;
}

.user-guide__section[b-w8jybf9e6m]  img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

@media (max-width: 960px) {
    .user-guide[b-w8jybf9e6m] {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-guide__toc[b-w8jybf9e6m] {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        padding-bottom: 16px;
    }
}
/* /Components/Pages/WorkItems/Index.razor.rz.scp.css */
/* Úkoly (TP-2695) — the reference grid.

   What is left here is what is about *tasks*: the preset buttons, the grouping picker, and how a row
   reads. Everything that is a property of a grid in general — the toolbar, the active-filter strip,
   the empty / error states, the first-load skeleton, the group header — moved into the shared
   components under Components/Shared/Grid, each with its own stylesheet (TP-2697).

   Every class below lands on markup MudBlazor owns (a MudDataGrid row, a group row, a header cell),
   which carries no scope attribute, so the selectors go through ::deep from the page's own wrapper.
   Every colour is a theme token, so light mode, dark mode and the tenant themes all work
   unchanged — nothing here hard-codes a hex value. */

.work-items[b-s9mx10rnmi] {
    /* The grid may be wider than the viewport on a phone; it scrolls inside its own container and
       never makes the whole page scroll sideways. */
    max-width: 100%;
}

/* ── Page header ──────────────────────────────────────────────────────────────────────── */

/* The only row on the page that is split left / right, and for the reason every page is: the title
   says where you are, the actions take you away from here. Everything below is left-aligned. */
.work-items-header[b-s9mx10rnmi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

/* How many rows the filter matches, next to the name of the page. Quiet and lining-figured, so it
   reads as a measurement of the heading rather than as part of it. */
.work-items-count[b-s9mx10rnmi] {
    margin-left: 10px;
    font-size: 1rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.work-items-header-actions[b-s9mx10rnmi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The header's own buttons kept MudBlazor's natural 36.5 px while every row below them was a
   different height — a third size on one page. */
.work-items-header[b-s9mx10rnmi]  .mud-button-root {
    height: 32px;
    min-height: 32px;
}

.work-items[b-s9mx10rnmi]  .work-items-action {
    border-radius: var(--mud-default-borderradius);
    text-transform: none;
    white-space: nowrap;
}

/* MudTooltip wraps the button in a block-level div, so without this the button sits on that div's
   baseline and ends up a few pixels above its unwrapped neighbour. */
.work-items-header[b-s9mx10rnmi]  .mud-tooltip-root {
    display: flex;
    align-items: center;
}

/* ── The control row ──────────────────────────────────────────────────────────────────── */

/* One row of five elements (PO, F2F 2026-09-23): the search · the presets · the filter combo with
   its funnel · grouping · columns. The combo and the funnel are one framed element, which is what
   keeps the row at five — the most a row can hold and still be read as groups.

   Reading order is DOM order — search, what I am looking at, how it is arranged — so no `order`
   and the focus order follows the eye (WCAG 2.4.3). */
.work-items-controls[b-s9mx10rnmi] {
    /* One flex row: the search against the left edge │ the choice of what to look at, right after it
       at the gap between groups │ the grid's fittings against the table's right edge. The choice used
       to be centred on the row, where it read as unrelated to the search it narrows together with
       (PO, 2026-09-23). A flex row rather than a grid because the search is what gives way when the
       row is tight: it starts at 360 px and shrinks to 240 px before anything else moves. */
    display: flex;
    align-items: center;
    column-gap: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 12px;
}

/* The shared toolbar contributes its three parts to this row directly, so they are placed by the
   row, not by the toolbar's own box. */
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar {
    display: contents;
}

.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow {
    flex: 0 1 360px;
    min-width: 240px;
}

.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow .grid-toolbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

/* On one row the presets and the combo never part (at 1280 px the combo used to drop onto a second
   line); the band inside wraps on its own by default, so it is held on one line too. */
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-center,
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-center .saved-views {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-tools {
    margin-left: auto;
}

@media (max-width: 1279px) {
    /* Below lg the three columns cannot share a line (with the side navigation open a 1024 px window
       has some 740 px left): the row becomes a wrapping flex row, the search takes a line of its
       own, and the choice and the fittings share the next, the fittings still against the right
       edge. */
    .work-items-controls[b-s9mx10rnmi] {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 24px;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow {
        flex: 1 1 100%;
        width: auto;
        max-width: 480px;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow .grid-toolbar-search {
        max-width: none;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-tools {
        margin-left: auto;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-center,
    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-center .saved-views {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow {
        max-width: none;
    }

    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-narrow .grid-toolbar-search {
        min-width: 0;
    }

    /* The choice takes the row; the two fittings follow it on the combo's line or the next. */
    .work-items-controls[b-s9mx10rnmi]  .grid-toolbar-center {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ── One height for every control in both rows ────────────────────────────────────────────
   Both shared components declare the variable on their own root, and a declaration on the element
   always wins over one inherited from an ancestor — so setting it on this wrapper, as this file
   used to, changed nothing at all. The value has to be set on the components themselves.

   32 px is what a control in a toolbar measures in every comparable product (Jira, Azure DevOps,
   GitHub Primer "medium"), it is Material's density level -2 from the 40 px default, and it clears
   the WCAG 2.5.8 minimum target of 24 x 24 CSS px on its own. */
.work-items-controls[b-s9mx10rnmi]  .saved-views,
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar {
    --grid-control-height: 32px;
    --saved-views-control-height: var(--grid-control-height);
    --grid-toolbar-control-height: var(--grid-control-height);
}

/* Only real controls of the band, never the clear button inside the search field nor a menu's icon
   activator: those are round by MudBlazor's own rule, and a 32 px height on a 24 px width turned
   them into ellipses — a pill radius the house style does not allow anywhere. */
.work-items-controls[b-s9mx10rnmi]  .mud-button-root:not(.mud-icon-button) {
    height: var(--grid-control-height, 32px);
    min-height: var(--grid-control-height, 32px);
}

/* Height counted including the padding, not on top of it — the padding stays, so the text keeps
   sitting in the middle of the field instead of against its top edge. */
.work-items-controls[b-s9mx10rnmi]  .mud-input-control .mud-input-root {
    box-sizing: border-box;
    height: var(--grid-control-height, 32px);
    min-height: var(--grid-control-height, 32px);
}

/* Without a floating label there is nothing to reserve room above the frame for, so the field's
   own box is finally the same height as the frame in it — which is what used to leave the search
   sitting 2 px above everything else in the row. */
.work-items-controls[b-s9mx10rnmi]  .mud-input-control {
    margin: 0;
}

/* An input reserves a strip under itself for helper text even when it has none. Targeted at the
   search field rather than the whole band, so a validating field added here later still reports. */
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-search .mud-input-control-helper-container,
.work-items-controls[b-s9mx10rnmi]  .grid-toolbar-search .mud-input-helper-text {
    display: none;
}

/* ── Presets, in the view band's leading slot ─────────────────────────────────────────── */

.work-items[b-s9mx10rnmi]  .work-items-presets {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sentence case and the house radius; the height comes from the band. */
.work-items[b-s9mx10rnmi]  .work-items-preset {
    text-transform: none;
    white-space: nowrap;
    border-radius: var(--mud-default-borderradius);
}

/* Chosen, but changed since: tonal — the accent is kept, the solid fill is not, so "this is where
   you started" and "it is no longer exactly that" read at once. Tokens only, so dark mode follows. */
.work-items[b-s9mx10rnmi]  .work-items-preset--modified {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

@media (max-width: 600px) {
    /* Both presets share their row half and half. */
    .work-items[b-s9mx10rnmi]  .work-items-presets {
        width: 100%;
    }

    .work-items[b-s9mx10rnmi]  .work-items-presets .mud-tooltip-root {
        flex: 1 1 0;
    }

    .work-items[b-s9mx10rnmi]  .work-items-presets .work-items-preset {
        width: 100%;
    }
}

/* ── Grouping, in the shared toolbar's tools slot ─────────────────────────────────────── */

/* The slot's content is rendered in this page's scope, so this is where it is sized. A square
   target, the same one the columns button gets, so the two fittings read as a pair. As a labelled
   select this was the widest control in the band at 200 px and the only one 52 px tall. */
.work-items[b-s9mx10rnmi]  .work-items-grouping > .mud-button-root {
    width: var(--grid-control-height, 32px);
    height: var(--grid-control-height, 32px);
    min-width: var(--grid-control-height, 32px);
    padding: 0;
    border-radius: var(--mud-default-borderradius);
}

/* While a grouping is on, the button is a split button (reviewer, 2026-09-23): the grouping menu and
   a narrow caret for expanding / collapsing every group, drawn as one framed control — the inner
   corners square, a hairline of the darker primary between the halves. It stays one element of the
   row and 32 px tall. The tooltip wrappers are flex boxes for the same reason as in the toolbar
   (see Components/Shared/Grid/README.md, "Past"). */
.work-items[b-s9mx10rnmi]  .work-items-grouping-split {
    display: inline-flex;
    align-items: center;
}

.work-items[b-s9mx10rnmi]  .work-items-grouping-split .mud-tooltip-root {
    display: flex;
    align-items: center;
}

.work-items[b-s9mx10rnmi]  .work-items-grouping--split > .mud-button-root {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.work-items[b-s9mx10rnmi]  .work-items-grouping-caret > .mud-button-root {
    width: 20px;
    min-width: 20px;
    height: var(--grid-control-height, 32px);
    padding: 0;
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
    box-shadow: inset 1px 0 0 var(--mud-palette-primary-darken);
}

.work-items[b-s9mx10rnmi]  .work-items-grouping-caret > .mud-button-root .mud-icon-root {
    font-size: 1rem;
}

/* The heading of a section inside a menu: not an option, so it must not look like one. */
.work-items[b-s9mx10rnmi]  .work-items-menu-caption {
    opacity: 1;
    pointer-events: none;
}

.work-items[b-s9mx10rnmi]  .work-items-menu-caption-text {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

/* The column filter editors themselves are styled in app.css, not here: MudBlazor's popover provider
   moves their markup out of this page's DOM subtree, where a scoped selector can never reach it. */

/* ── The funnel in the column header ──────────────────────────────────────────────────── */

/* A funnel on all fourteen columns is noise until one of them means something. The empty ones
   recede and come forward on hover or keyboard focus; a column that is actually filtering keeps its
   funnel at full strength in the accent colour, so an active filter reads at a glance. */
/* Dimmed by colour rather than by opacity: at 0.28 the funnel came out around 1.3 : 1 against the
   header, well under the 3 : 1 WCAG 1.4.11 asks of a control, and a touch device — which has no
   hover — never got it back. The disabled-text token is the quietest value that still passes. */
.work-items[b-s9mx10rnmi]  .mud-table-head .filter-button {
    color: var(--mud-palette-text-disabled);
    padding: 4px;
    transition: color 120ms ease-in-out;
}

.work-items[b-s9mx10rnmi]  .mud-table-head th:hover .filter-button,
.work-items[b-s9mx10rnmi]  .mud-table-head .filter-button:focus-visible {
    color: var(--mud-palette-text-primary);
}

.work-items[b-s9mx10rnmi]  .mud-table-head .filter-button.filtered {
    opacity: 1;
    color: var(--mud-palette-primary);
}

/* ── Rows ─────────────────────────────────────────────────────────────────────────────── */

/* One line per row. A wrapping title turned every second row into two lines, so the table ran at
   53 px a row where it needed 37 — a third of the screen spent on re-flowing text nobody reads in
   full from a list. The full text stays reachable: the cell carries it as a title attribute, and
   the detail is one click away. This is what Linear, Jira and Azure DevOps all do with a list.

   The right padding is MudBlazor's 24 px, which was sized for a table that has no resize handles;
   ours does, and the handle needs far less. */
/* Body cells only: the header carries the column's width (a saved view may have one stored for it)
   and must not be squeezed by the ellipsis trick. */
.work-items[b-s9mx10rnmi]  .mud-table-dense .mud-table-body .mud-table-cell {
    /* 6 px lands the row on 37 px: Material's densest step for a list row, and the point where a
       row is still comfortably a click target. 4 px measured 33 px, which is tighter than any of
       the products this was compared against and would have been the opposite extreme. */
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths (PO, 2026-09-22: the name is the widest column by default; the project column got
   a proper width after sitting pressed against the state column).

   Every column but the name carries an explicit width on its header (the page's designed width, or
   the one the user dragged and saved); body cells have max-width 0, so their content never asks
   for width and is cut with an ellipsis instead. The name header asks for 100 %, which in an
   auto-layout table means "whatever the fixed columns leave", with a floor below which the table
   grows and scrolls inside its container rather than squeezing the name away.

   Not table-layout: fixed — that was tried first and it collapses the one width-less column to
   0 px the moment the fixed columns add up to more than the box (measured: 250 px at 1680, 10 px
   at 1440, 0 at 1280), and on a narrow window it did the opposite and let the name swallow the
   whole table. Auto layout honours the header widths and the floor, and overflows honestly. */
.work-items[b-s9mx10rnmi]  .mud-table-root {
    table-layout: auto;
    width: 100%;
}

.work-items[b-s9mx10rnmi]  .mud-table-dense .mud-table-body .mud-table-cell {
    max-width: 0;
}

/* No width on the name at all: in auto layout the surplus over the columns' preferred widths goes
   to the width-less columns, so the fixed columns keep exactly their designed widths and the name
   gets the rest. Asking for 100 % instead made the name outrank them and squeezed the project
   column from 260 to 163 px. The floor is what stops the name from vanishing on a narrow window —
   past it the table scrolls inside its box. */
.work-items[b-s9mx10rnmi]  .mud-table-dense .mud-table-head th.work-items-col-title {
    min-width: 220px;
}

/* A header is as wide as what is in it, and MudDataGrid puts 52 px of invisible controls in every
   one: a sort glyph at opacity 0 (26 px) and a per-column "⋮" menu whose glyph is at opacity 0
   (26 px). Eight columns, 416 px reserved for nothing — measured: the "Priorita" header was 164 px
   for 47 px of text. That is why the designed widths were never reached and the name had nothing
   left to grow into.

   The per-column menu goes: everything in it (sort, hide, filter) is already a click on the header,
   the columns glyph or the funnel. The sort glyph takes no space until the column is actually
   sorted — an arrow next to the name of the sorted column is the whole point of it. */
.work-items[b-s9mx10rnmi]  .mud-table-head .column-options .mud-menu {
    display: none;
}

.work-items[b-s9mx10rnmi]  .mud-table-head .column-options .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* The header stays on one line: it is the column's ruler, and a ruler that wraps has no width.
   The name's header takes what the name takes. */
.work-items[b-s9mx10rnmi]  .mud-table-dense .mud-table-head .mud-table-cell {
    padding: 6px 12px;
    white-space: nowrap;
    vertical-align: middle;
}

/* A cell whose content is a chip or a dot must not clip it to an ellipsis. */
.work-items[b-s9mx10rnmi]  .mud-table-body .mud-table-cell > .mud-chip,
.work-items[b-s9mx10rnmi]  .mud-table-body .mud-table-cell > .work-items-state {
    max-width: 100%;
}

/* Code and title are the reading axis: the code is quiet and monospaced so the eye can scan a
   column of them, the title carries the weight. */
.work-items[b-s9mx10rnmi]  .work-items-code {
    font-family: var(--mud-typography-caption-family, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.work-items[b-s9mx10rnmi]  .work-items-title {
    font-weight: 500;
}

/* A link in a cell inherits the row's colour: the whole row is clickable anyway, so underlining
   every title would draw a ladder down the table. It announces itself on hover, and the focus ring
   from app.css makes it findable from the keyboard. */
.work-items[b-s9mx10rnmi]  .work-items-link {
    color: inherit;
    text-decoration: none;
}

.work-items[b-s9mx10rnmi]  .work-items-link:hover {
    text-decoration: underline;
}

.work-items[b-s9mx10rnmi]  .work-items-project {
    color: var(--mud-palette-text-secondary);
}

/* MudBlazor gives every chip a 4 px margin, which inside a dense cell is 8 px of row height that
   nothing needs: the type column is visible by default, so it made the whole table 8 px per row
   taller — 200 px on a full page. Set here rather than with `ma-0` on each chip, so the four
   columns cannot drift apart again. */
.work-items[b-s9mx10rnmi]  .work-items-chip {
    border-radius: var(--mud-default-borderradius);
    margin: 0;
}

/* A chip in a cell never runs past its column ("Řešitel + spolupracovník" did, at 140 px): the
   text ends in an ellipsis and the chip's title carries all of it. Only the text is clipped, so an
   icon or a close button inside the chip stays whole. */
.work-items[b-s9mx10rnmi]  .work-items-chip {
    max-width: 100%;
}

.work-items[b-s9mx10rnmi]  .work-items-chip .mud-chip-content {
    min-width: 0;
}

.work-items[b-s9mx10rnmi]  .work-items-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The state reads as a dot plus the project's own state name — the dot carries the category, which
   is the only thing that means the same in every project. */
.work-items[b-s9mx10rnmi]  .work-items-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.work-items[b-s9mx10rnmi]  .work-items-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* The left edge of a row is the task's type, in the type's own colour from the code list. It is
   what let the type column leave the default set: the colour is on every row, and the code cell
   names it on hover for anyone who does not know the palette by heart. Rows of a type with no
   colour simply have no accent. */
.work-items[b-s9mx10rnmi]  .mud-table-body .mud-table-row td:first-child {
    box-shadow: inset 3px 0 0 0 var(--work-items-row-accent, transparent);
}

/* Overdue takes no styling here on purpose. The due-date cell already prints the date in the error
   colour and puts a mark beside it, which is the signal; the left edge belongs to the type now,
   and a row cannot have two left edges. The tint that used to sit here lost to MudBlazor's own
   striping rule on specificity anyway, so it showed on even rows and not on odd ones. The
   work-items-overdue-row class stays because the E2E suite and the row's own marker use it. */

/* ── Group headers ────────────────────────────────────────────────────────────────────── */

/* MudDataGrid's own expander raises no event, so the persisted expansion set could never follow it.
   It is hidden and the shared GridGroupHeader is the toggle. The class lands on the grid's own
   markup, which is why it stays here rather than travelling with that component. */
.work-items[b-s9mx10rnmi]  .work-items-group-row .mud-table-row-expander {
    display: none;
}

/* ── First load ───────────────────────────────────────────────────────────────────────── */

/* The strip's own distance from the table, set by the page that places it rather than baked into
   the shared component. */
.work-items[b-s9mx10rnmi]  .grid-active-filters {
    margin-bottom: 12px;
}

.work-items-shell[b-s9mx10rnmi] {
    position: relative;
    /* The shared skeleton is absolutely positioned, so the shell has to have a height of its own
       before the grid has rendered anything to give it one. */
    min-height: 360px;
}

/* ── Narrow screens ───────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    /* The icon and the tooltip still name the export; the word is what the width cannot afford. */
    .work-items[b-s9mx10rnmi]  .work-items-action-text {
        display: none;
    }

    .work-items-header[b-s9mx10rnmi]  .work-items-action .mud-button-icon-start {
        margin: 0;
    }

    /* Without its label the export keeps MudBlazor's 64 px minimum and reads as an empty box. */
    .work-items-header[b-s9mx10rnmi]  .work-items-action {
        min-width: 0;
    }

}

/* The table scrolls inside its own box at every width; the page itself must not gain a horizontal
   scrollbar. With the project column given a floor this stopped being a phone-only concern —
   at 1024 px the columns already ask for more than the window has. */
.work-items[b-s9mx10rnmi]  .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* /Components/Shared/Grid/GridActiveFilterBar.razor.rz.scp.css */
/* The conditions panel of a reference grid (TP-2697; reworked 2026-09-23).

   A column filter hides behind a funnel icon in a header the user may have scrolled past, or hidden
   altogether. This panel is the one place that always answers "why am I not seeing everything" — so
   it is a band of its own, not a line of text among the controls. Every colour is a theme token, so
   the background and the tonal chips switch with dark mode by themselves. */

.grid-active-filters[b-38wbmg6sea] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.grid-active-filters-label[b-38wbmg6sea] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-right: 4px;
}



.grid-active-filters-empty[b-38wbmg6sea] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* The chip is MudBlazor's markup, so the class only reaches it through ::deep. Its own 4 px margin
   goes: it added itself to the panel's gap, so the distance between two chips came out at 14 px
   while the label sat 6 px from them — one panel, three different spacings. */
.grid-active-filters[b-38wbmg6sea]  .grid-active-filter-chip {
    border-radius: var(--mud-default-borderradius);
    margin: 0;
    height: 24px;
}

/* A condition added or changed on top of the stored filter: tonal, not a solid primary block — it
   is a difference to notice, not an alarm. */
.grid-active-filters[b-38wbmg6sea]  .grid-active-filter-chip--changed {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

/* The two decisions about the conditions sit at the panel's far end, and wrap onto a line of their
   own (still right-aligned) when the chips need the room. */
.grid-active-filters-actions[b-38wbmg6sea] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.grid-active-filters-actions[b-38wbmg6sea]  .mud-tooltip-root {
    display: flex;
    align-items: center;
}

/* Sentence case, like every other control above the grid — MudBlazor's own upper case made these
   buttons shout across a panel whose job is to be read, not noticed. */
.grid-active-filters[b-38wbmg6sea]  .mud-button-root {
    text-transform: none;
    height: 32px;
    border-radius: var(--mud-default-borderradius);
}

/* A chip never outgrows the panel: the column list is long, and on a phone it pushed the page into
   a sideways scroll. The text ends in an ellipsis and the chip's title carries all of it. */
.grid-active-filters[b-38wbmg6sea]  .grid-active-filter-chip {
    max-width: 100%;
}

.grid-active-filters[b-38wbmg6sea]  .grid-active-filter-chip .mud-chip-content {
    min-width: 0;
}

/* Only the text is cut short: the chip's close button sits inside the same content box, so clipping
   the box clipped the button too. */
.grid-active-filters[b-38wbmg6sea]  .grid-active-filter-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/Grid/GridGroupHeader.razor.rz.scp.css */
/* The group header of a reference grid (TP-2697). It renders inside MudDataGrid's GroupTemplate but
   carries its own scope, so no ::deep is needed. Hiding MudDataGrid's native expander is the host's
   job — that class lands on the grid's own markup. */

.grid-group-toggle[b-7xytwl4fnn] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--mud-default-borderradius);
}

.grid-group-toggle:hover[b-7xytwl4fnn] {
    background-color: var(--mud-palette-action-default-hover);
}

.grid-group-toggle:focus-visible[b-7xytwl4fnn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.grid-group-title[b-7xytwl4fnn] {
    font-weight: 600;
}

.grid-group-count[b-7xytwl4fnn] {
    margin-left: 8px;
    padding: 0 8px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Grid/GridPlaceholder.razor.rz.scp.css */
/* The empty / no-match / error / capped state of a reference grid (TP-2697). It renders inside
   MudDataGrid's NoRecordsContent slot but carries its own scope, so no ::deep is needed. */

.grid-placeholder[b-sgpur7r461] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px 16px;
    text-align: center;
}
/* /Components/Shared/Grid/GridSkeleton.razor.rz.scp.css */
/* The first-load skeleton of a reference grid (TP-2697). It covers the mounting grid, which is why
   it is absolutely positioned — the host wrapper carries `position: relative`. */

.grid-skeleton[b-tyqjny29pn] {
    position: absolute;
    inset: 0;
    padding: 16px;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    z-index: 2;
}
/* /Components/Shared/Grid/GridToolbar.razor.rz.scp.css */
/* The toolbar of a reference grid (TP-2697). Every colour and radius is a theme token, so light
   mode, dark mode and the tenant themes all work unchanged.

   The spacing rhythm is the whole point of this file. Controls that belong together sit
   --grid-gap-in-group apart, groups sit --grid-gap-between-groups apart, and the second number is
   deliberately more than three times the first: with one even gap everywhere the eye gets a row of
   unrelated controls in a line (Gestalt proximity — nearness is what says "these belong
   together"). The same two tokens are used by the saved-views band above, so the two rows share
   one rhythm instead of each inventing its own. */

.grid-toolbar[b-5afp8nnau8] {
    /* 32 px, the size every comparable product uses for a control in a toolbar (Jira, Azure
       DevOps, GitHub Primer "medium", Linear a touch smaller). It is above the WCAG 2.5.8 minimum
       target of 24 x 24 CSS px on its own, and the glyph buttons reach 32 x 32. */
    --grid-toolbar-control-height: 32px;
    --grid-gap-in-group: 8px;
    --grid-gap-between-groups: 24px;
    display: flex;
    align-items: center;
    /* Start, not space-between: the presets and the filter combo follow the search at the gap
       between groups, where the eye already is (PO, 2026-09-23 — centred they floated off on their
       own); only the table fittings are pushed right, by their own margin. */
    justify-content: flex-start;
    gap: var(--grid-gap-between-groups);
    flex-wrap: wrap;
}

/* Left: how the set of rows is narrowed. */
.grid-toolbar-narrow[b-5afp8nnau8] {
    display: flex;
    align-items: center;
    gap: var(--grid-gap-in-group);
    flex-wrap: wrap;
    min-width: 0;
}

/* Next to the search: what the grid is showing (the page's presets and saved filters, when it has them). */
.grid-toolbar-center[b-5afp8nnau8] {
    display: flex;
    align-items: center;
    gap: var(--grid-gap-in-group);
    flex-wrap: wrap;
    min-width: 0;
}

/* Right: how the surviving rows are arranged. It is pushed to the table's right edge on purpose —
   these controls change the table, so they stand over the table rather than in the filter queue. */
.grid-toolbar-tools[b-5afp8nnau8] {
    display: flex;
    align-items: center;
    gap: var(--grid-gap-in-group);
    flex: 0 0 auto;
    margin-left: auto;
}

/* The classes below land on markup MudBlazor owns, which carries no scope attribute of ours. */
.grid-toolbar[b-5afp8nnau8]  .grid-toolbar-search {
    min-width: 240px;
    max-width: 320px;
}

/* Without a floating label the field is free to be the same height as its neighbours. */
.grid-toolbar[b-5afp8nnau8]  .grid-toolbar-search .mud-input-root {
    height: var(--grid-toolbar-control-height);
    border-radius: var(--mud-default-borderradius);
}

.grid-toolbar[b-5afp8nnau8]  .mud-button-root {
    height: var(--grid-toolbar-control-height);
    border-radius: var(--mud-default-borderradius);
    text-transform: none;
}

/* A square target for a glyph: 32 x 32 keeps it well clear of the WCAG 2.5.8 minimum, and equal
   sides are what stops a row of icons from looking like a row of half-empty buttons. */
.grid-toolbar-tools[b-5afp8nnau8]  .grid-toolbar-tool {
    width: var(--grid-toolbar-control-height);
    height: var(--grid-toolbar-control-height);
    min-width: var(--grid-toolbar-control-height);
    padding: 0;
    border-radius: var(--mud-default-borderradius);
}

/* A MudTooltip wraps its trigger in a block-level div; inside it the button would sit on that
   div's baseline and ride above the middle of the row. */
.grid-toolbar[b-5afp8nnau8]  .mud-tooltip-root {
    display: flex;
    align-items: center;
}

@media (max-width: 600px) {
    /* The search field takes the row it needs; the fittings stay together on the next one, still
       against the right edge, so the corner they live in never moves. */
    .grid-toolbar[b-5afp8nnau8]  .grid-toolbar-search {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .grid-toolbar-narrow[b-5afp8nnau8] {
        width: 100%;
    }
}
/* /Components/Shared/Grid/RowLink.razor.rz.scp.css */
/* A link in a row inherits the row's colour: the whole row is clickable anyway, so underlining
   every code and name would draw a ladder down the table. It announces itself on hover; the focus
   ring comes from the global a:focus-visible rule in app.css. */
.row-link[b-84z80mhvm7] {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.row-link:hover[b-84z80mhvm7] {
    text-decoration: underline;
}

.row-link-ellipsis[b-84z80mhvm7] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/HelpDrawer.razor.rz.scp.css */
.help-drawer__shell[b-shoa0o3kal] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mud-palette-surface);
}

.help-drawer__header[b-shoa0o3kal] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.help-drawer__header-title[b-shoa0o3kal] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.help-drawer__title[b-shoa0o3kal] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-drawer__body[b-shoa0o3kal] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background: var(--mud-palette-background);
}

.help-drawer__empty[b-shoa0o3kal] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 48px;
    color: var(--mud-palette-text-disabled);
    text-align: center;
}

.help-drawer__see-also[b-shoa0o3kal] {
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.help-drawer__see-also-label[b-shoa0o3kal] {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.help-drawer__chips[b-shoa0o3kal] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-drawer__footer[b-shoa0o3kal] {
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* Screenshots inside the help text run full width of the panel — the drawer is
   narrow, so the guide's 1600px captures need to scale down, not overflow. */
.help-drawer__content[b-shoa0o3kal]  img {
    width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.help-drawer__content[b-shoa0o3kal]  table {
    width: 100%;
    display: block;
    overflow-x: auto;
}
/* /Components/Shared/Projects/WorkItemWbsTree.razor.rz.scp.css */
.wbs-canvas[b-qpflsqfzap] {
    /* Fills what is left below the work items toolbar and filter bar, so the map does not
       push itself past the bottom of the window and force the page to scroll. */
    /* One batch of children (12 rows of ~40px) has to fit without the map shrinking to the
       minimum zoom, so the floor stays above that even when the window is short. */
    height: calc(100vh - 390px);
    min-height: 460px;
    max-height: 760px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
    overflow: hidden;
}

/* Positioning context for the node action toolbar (pinned to the clicked node). */
.wbs-canvas-wrap[b-qpflsqfzap] {
    position: relative;
}

/* Node action toolbar (WI-06515): a compact icon bar centred on the node, sitting 6px above
   its top edge — or 6px below its bottom edge when the node is at the top of the canvas. */
.wbs-node-actions[b-qpflsqfzap] {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    transform: translate(-50%, calc(-100% - 6px));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-4);
    white-space: nowrap;
}

.wbs-node-actions.wbs-node-actions-below[b-qpflsqfzap] {
    transform: translate(-50%, 6px);
}

/* Keyboard focus on a node: the rect has no CSS outline in SVG, so show it on the stroke. */
.wbs-canvas[b-qpflsqfzap]  .wbs-node-rect:focus {
    outline: none;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-rect:focus-visible {
    stroke: var(--mud-palette-primary);
    stroke-width: 2.5px;
}

.wbs-canvas[b-qpflsqfzap]  svg {
    display: block;
}

.wbs-canvas[b-qpflsqfzap]  svg.wbs-dragging-active,
.wbs-canvas[b-qpflsqfzap]  svg.wbs-dragging-active .wbs-node-rect {
    cursor: grabbing !important;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-link {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.5px;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-rect {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1px;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node:hover .wbs-node-rect {
    stroke: var(--mud-palette-primary);
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-colorbar {
    stroke: none;
    /* Click and drag live on the node's rect underneath; the bar must not intercept them. */
    pointer-events: none;
}

/* Drag-and-drop reparenting (WI-06515): the grabbed subtree fades, legal targets get a
   dotted primary outline, the one under the pointer a solid green one, an illegal one a
   red one; the ghost is a translucent copy of the grabbed node following the pointer. */
.wbs-canvas[b-qpflsqfzap]  .wbs-dragging {
    opacity: 0.35;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-drop-candidate .wbs-node-rect {
    stroke: var(--mud-palette-primary);
    stroke-dasharray: 3 3;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-drop-target .wbs-node-rect {
    stroke: var(--mud-palette-success);
    stroke-width: 2.5px;
    stroke-dasharray: none;
    fill: var(--mud-palette-success-hover, var(--mud-palette-surface));
}

.wbs-canvas[b-qpflsqfzap]  .wbs-drop-invalid .wbs-node-rect {
    stroke: var(--mud-palette-error);
    stroke-width: 2px;
    stroke-dasharray: 2 2;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-drag-ghost {
    opacity: 0.85;
    pointer-events: none;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-drag-ghost .wbs-node-rect {
    stroke: var(--mud-palette-primary);
    stroke-width: 2px;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-label {
    fill: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    /* The click handler sits on the node's rect; without this the label swallows clicks
       aimed at the middle of a node (and at the "N more" node, which is mostly label). */
    pointer-events: none;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-done {
    opacity: 0.55;
}

/* "N more" node: reads as an affordance, not as a work item — dashed outline, no type
   colour bar. Keeps a real fill: an SVG shape with fill:none takes no pointer events, so
   a transparent-looking node would simply not be clickable. */
.wbs-canvas[b-qpflsqfzap]  .wbs-node-more .wbs-node-rect {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-primary);
    stroke-dasharray: 4 3;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-more .wbs-node-colorbar {
    display: none;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-node-more .wbs-node-label {
    fill: var(--mud-palette-primary);
    font-style: italic;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-toggle circle {
    /* MudBlazor spells it "gray"; the "grey" variable does not exist, and an undefined
       var() here left the toggle painted with the SVG default (solid black). */
    fill: var(--mud-palette-background-gray);
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1px;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-toggle-icon {
    fill: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    text-anchor: middle;
}

.wbs-canvas[b-qpflsqfzap]  .wbs-toggle-badge {
    fill: var(--mud-palette-primary);
    font-size: 0.625rem;
    font-weight: 600;
}
/* /Components/Shared/SavedViewBar.razor.rz.scp.css */
/* Saved and shared grid views (TP-2696; reworked 2026-09-23).
   Every colour is a theme token, so light mode, dark mode and the tenant themes all work
   unchanged — nothing here hard-codes a value. The bar wraps rather than scrolls, so at 390 px it
   becomes two short rows and the page never gains a horizontal scrollbar.

   Spacing follows the same two tokens as the toolbar it sits in: things that belong together sit
   --grid-gap-in-group apart, groups sit --grid-gap-between-groups apart. */

.saved-views[b-z77t8emzu3] {
    --saved-views-control-height: 32px;
    --grid-gap-in-group: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Presets · rule · combo│funnel: one group of choices, so the in-group gap on both sides of
       the rule — at 24 px the rule floated between two strangers. */
    gap: var(--grid-gap-in-group);
    min-width: 0;
}

/* Every control in the band, whoever rendered it, is the same height and centres its own content —
   a MudTooltip around a label wraps it in a block-level div, whose line box would otherwise leave
   the icon and the text riding above the middle of the button. */
.saved-views[b-z77t8emzu3]  .mud-button-root {
    height: var(--saved-views-control-height);
    text-transform: none;
}

.saved-views[b-z77t8emzu3]  .mud-tooltip-root {
    display: flex;
    align-items: center;
}

/* ── The page's presets, at the head of the band ──────────────────────────────────────── */

.saved-views-leading[b-z77t8emzu3] {
    display: flex;
    align-items: center;
    gap: var(--grid-gap-in-group);
    min-width: 0;
}

/* Reads as "these are two different kinds of choice" — a preset, or a filter from the list. The
   input line token, not the default one: at 1 px wide the lighter token is invisible. */
.saved-views-divider[b-z77t8emzu3] {
    width: 1px;
    height: 20px;
    flex: 0 0 auto;
    background-color: var(--mud-palette-lines-inputs);
}

/* ── The combo and the funnel: one framed control ─────────────────────────────────────── */

/* The frame is drawn by a pseudo-element over the two buttons rather than as a border of this box:
   a border would take 2 px from the 32 px the page gives every button of the row, and the buttons
   would stick out of their own frame. */
.saved-views-current[b-z77t8emzu3] {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: var(--saved-views-control-height);
}

.saved-views-current[b-z77t8emzu3]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    pointer-events: none;
}

.saved-views[b-z77t8emzu3]  .saved-views-combo {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
}

/* The activator is MudMenu's own button; the open filter's name is its label. The frame is the
   composite's, so the button itself draws none and only rounds the outer corners. */
.saved-views[b-z77t8emzu3]  .saved-views-combo > .mud-button-root {
    height: 100%;
    min-width: 180px;
    max-width: 280px;
    justify-content: space-between;
    border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);
    white-space: nowrap;
}

/* A name too long for the bar is cut rather than pushing everything else off the row. */
.saved-views[b-z77t8emzu3]  .saved-views-combo > .mud-button-root .mud-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On a preset the combo only invites a choice, so it reads as a placeholder. */
.saved-views[b-z77t8emzu3]  .saved-views-combo--placeholder > .mud-button-root {
    color: var(--mud-palette-text-secondary);
}

.saved-views-seam[b-z77t8emzu3] {
    width: 1px;
    flex: 0 0 auto;
    background-color: var(--mud-palette-lines-inputs);
}

.saved-views-toggle-wrap[b-z77t8emzu3] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.saved-views[b-z77t8emzu3]  .saved-views-toggle {
    height: 100%;
    min-width: 52px;
    padding: 0 10px;
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
}

/* Without a count the funnel is a square glyph target. */
.saved-views[b-z77t8emzu3]  .saved-views-toggle--bare {
    min-width: 32px;
    width: 32px;
    padding: 0;
}

.saved-views[b-z77t8emzu3]  .saved-views-toggle--bare .mud-button-icon-start {
    margin: 0;
}

.saved-views-count[b-z77t8emzu3] {
    font-variant-numeric: tabular-nums;
}

/* ── Unsaved changes ──────────────────────────────────────────────────────────────────── */

/* A dot on the funnel's top-right corner, taken out of the flow so the control is the same width
   with it and without it. A marker, not an alarm: a changed filter is ordinary work. The ring in
   the page's background colour lifts it off the frame in both themes. */
.saved-views-dirty[b-z77t8emzu3] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mud-palette-warning);
    box-shadow: 0 0 0 2px var(--mud-palette-background);
    pointer-events: none;
}

@media (max-width: 600px) {
    /* The band wraps here, so the rule no longer stands between two groups — it would just be a
       stray mark at the end of a line. */
    .saved-views-divider[b-z77t8emzu3] {
        display: none;
    }

    .saved-views[b-z77t8emzu3] {
        width: 100%;
        row-gap: 12px;
    }

    /* Presets share a row half and half; the combo takes what the row leaves. */
    .saved-views-leading[b-z77t8emzu3] {
        flex: 1 1 100%;
    }

    .saved-views-leading[b-z77t8emzu3]  > * {
        flex: 1 1 0;
    }

    .saved-views-current[b-z77t8emzu3] {
        flex: 1 1 auto;
    }

    .saved-views[b-z77t8emzu3]  .saved-views-combo {
        flex: 1 1 auto;
    }

    .saved-views[b-z77t8emzu3]  .saved-views-combo > .mud-button-root {
        min-width: 160px;
        max-width: none;
        width: 100%;
    }
}
/* /Components/Shared/SavedViewManageDialog.razor.rz.scp.css */
/* The manage dialog of saved filters (2026-09-23). Rows are 40 px, actions are 32 x 32 glyph
   buttons 8 px apart; every colour is a theme token. */

.saved-view-manage[b-chiu30m692] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.saved-view-manage-section[b-chiu30m692] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 24px 0 8px;
}

.saved-view-manage-caption[b-chiu30m692] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.saved-view-manage-note[b-chiu30m692] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.saved-view-manage-list[b-chiu30m692] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.saved-view-manage-row[b-chiu30m692] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 8px 4px 12px;
    min-width: 0;
}

.saved-view-manage-row + .saved-view-manage-row[b-chiu30m692] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.saved-view-manage-row:focus-visible[b-chiu30m692] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.saved-view-manage-name[b-chiu30m692] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-view-manage-owner[b-chiu30m692] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.saved-view-manage-actions[b-chiu30m692] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.saved-view-manage-actions[b-chiu30m692]  .mud-tooltip-root {
    display: flex;
    align-items: center;
}

.saved-view-manage[b-chiu30m692]  .mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--mud-default-borderradius);
}

.saved-view-manage-rename[b-chiu30m692] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.saved-view-manage-rename[b-chiu30m692]  .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}