/* /Components/PageShell.razor.rz.scp.css */
/*
    Every rule is anchored on an element this component renders itself (MyCRM's "Scoped CSS" rule): `.page-shell` and
    its children carry this component's scope attribute, so no rule here needs ::deep except where MudBlazor's own
    markup is reached into, and then always below `.page-shell`.
*/

.page-shell[b-eua9vqzmob] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.page-shell-header[b-eua9vqzmob] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.page-shell-title[b-eua9vqzmob] {
    flex: 1 1 auto;
    min-width: 0;
}

.page-shell-title[b-eua9vqzmob]  h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-shell-actions[b-eua9vqzmob] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* The only part that scrolls. A flex column too, so a page body that wants the whole height (the board) can take it
   with flex: 1 1 auto; min-height: 0 of its own. */
.page-shell-content[b-eua9vqzmob] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 24px 24px;
}

@media (max-width: 599px) {
    .page-shell-header[b-eua9vqzmob] {
        padding: 12px 16px 8px;
    }

    .page-shell-content[b-eua9vqzmob] {
        padding: 12px 16px 16px;
    }
}
/* /Components/StatusBar.razor.rz.scp.css */
/*
    Anchored on `.status-bar`, which this component renders itself; every element below is its own markup too, so no
    rule needs ::deep (MyCRM's "Scoped CSS" rule).
*/

.status-bar[b-k6ew7xekgh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.status-bar-track[b-k6ew7xekgh] {
    display: flex;
    height: 20px;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
}

.status-bar-empty[b-k6ew7xekgh] {
    background-color: var(--mud-palette-lines-default);
    height: 8px;
}

.status-bar-segment[b-k6ew7xekgh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 0;
    min-width: 22px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.status-bar-segment + .status-bar-segment[b-k6ew7xekgh] {
    border-left: 2px solid var(--mud-palette-surface);
}

.status-bar-legend[b-k6ew7xekgh] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.status-bar-legend-item[b-k6ew7xekgh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-bar-dot[b-k6ew7xekgh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* /Components/TicketActivityList.razor.rz.scp.css */
/*
    Anchored on `.ticket-activity`, this component's own root. It is a flex item of the tab set's panels area (the tab
    panel itself is display: contents), so it takes the height the comment box below it leaves and scrolls inside it.
*/

.ticket-activity[b-pr8ik721ly] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px;
}

.ticket-activity-entry[b-pr8ik721ly] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background);
}

.ticket-activity-head[b-pr8ik721ly] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
}

.ticket-activity-head[b-pr8ik721ly]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-primary);
}

.ticket-activity-author[b-pr8ik721ly] {
    font-weight: 500;
}

.ticket-activity-sep[b-pr8ik721ly],
.ticket-activity-when[b-pr8ik721ly],
.ticket-activity-size[b-pr8ik721ly] {
    color: var(--mud-palette-text-secondary);
}

.ticket-activity-text[b-pr8ik721ly] {
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-activity-files[b-pr8ik721ly] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-activity-file[b-pr8ik721ly] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 0.8125rem;
}

.ticket-activity-file[b-pr8ik721ly]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-activity-link[b-pr8ik721ly] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-primary);
}

.ticket-activity-size[b-pr8ik721ly] {
    flex: 0 0 auto;
    font-size: 0.75rem;
}
/* /Components/TicketCard.razor.rz.scp.css */
/*
    Anchored on `.ticket-card`, which this component renders itself; the chips, icon and avatar are MudBlazor's and are
    reached with ::deep below it (MyCRM's "Scoped CSS" rule). The 4 px left border takes the priority's colour from the
    inline style; this sheet gives it its width and a neutral fallback.
*/

.ticket-card[b-n63g3l1do4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background);
    cursor: grab;
}

.ticket-card:active[b-n63g3l1do4] {
    cursor: grabbing;
}

.ticket-card:hover[b-n63g3l1do4] {
    background-color: var(--mud-palette-action-default-hover);
}

.ticket-card:focus-visible[b-n63g3l1do4] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* The title takes what the edit button leaves, so a long one wraps beside it rather than running under it. */
.ticket-card-head[b-n63g3l1do4] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.ticket-card-title[b-n63g3l1do4] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ticket-card-reference[b-n63g3l1do4] {
    margin-right: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.ticket-card-chips[b-n63g3l1do4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ticket-card-chips[b-n63g3l1do4]  .mud-chip {
    margin: 0;
}

.ticket-card-meta[b-n63g3l1do4] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
}

.ticket-card-due[b-n63g3l1do4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-card-due.ticket-card-overdue[b-n63g3l1do4] {
    color: var(--mud-palette-error);
    font-weight: 500;
}

.ticket-card-assignee[b-n63g3l1do4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
}

.ticket-card-assignee[b-n63g3l1do4]  .mud-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
}

.ticket-card-deleted[b-n63g3l1do4] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Pulled into the card's corner, over part of its padding, so it costs the title as little width as it can. */
.ticket-card-edit[b-n63g3l1do4] {
    flex: 0 0 auto;
    margin: -4px -6px -4px 0;
}

.ticket-card-edit[b-n63g3l1do4]  .mud-icon-button {
    padding: 3px;
    color: var(--mud-palette-text-secondary);
}

.ticket-card-edit[b-n63g3l1do4]  .mud-icon-button .mud-icon-root {
    font-size: 1.125rem;
}

.ticket-card-footer[b-n63g3l1do4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-card-count[b-n63g3l1do4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ticket-card-count[b-n63g3l1do4]  .mud-icon-root {
    font-size: 1rem;
}

.ticket-card-ago[b-n63g3l1do4] {
    margin-left: auto;
    white-space: nowrap;
}
/* /Components/TicketCommentBox.razor.rz.scp.css */
/*
    Anchored on `.ticket-comment-box`, this component's own root; the text field, chips and buttons are MudBlazor's and
    are reached with ::deep below it. A flex item of the tab set's panels area, kept at its own height under the
    timeline, which takes the rest and scrolls.
*/

.ticket-comment-box[b-p6sxfzq5sk] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ticket-comment-form[b-p6sxfzq5sk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticket-comment-files[b-p6sxfzq5sk] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ticket-comment-files[b-p6sxfzq5sk]  .mud-chip {
    margin: 0;
    max-width: 100%;
}

.ticket-comment-actions[b-p6sxfzq5sk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
/* /Components/TicketHistoryList.razor.rz.scp.css */
/*
    Anchored on `.ticket-history`, this component's own root. It is a flex item of the tab set's panels area (the tab
    panel itself is display: contents), so it takes the remaining height and scrolls inside it.
*/

.ticket-history[b-goaai3cvk4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px;
}

.ticket-history-list[b-goaai3cvk4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-history-line[b-goaai3cvk4] {
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ticket-history-who[b-goaai3cvk4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}

.ticket-history-who[b-goaai3cvk4]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-primary);
}

.ticket-history-sep[b-goaai3cvk4],
.ticket-history-when[b-goaai3cvk4] {
    color: var(--mud-palette-text-secondary);
}

.ticket-history-sep[b-goaai3cvk4] {
    margin: 0 4px;
}
/* /Components/TicketPanel.razor.rz.scp.css */
/*
    Anchored on `.ticket-panel`, the first element this component renders itself inside the drawer (MyCRM's "Scoped
    CSS" rule): the drawer, its content box, the select, the chips and the whole tab set are MudBlazor's, reached only
    with ::deep below an element of ours.

    The height chain: the drawer's content box is a full-height flex column; `.ticket-panel` fills it; the top part
    takes its content's height up to half the panel (and scrolls past that, for a long description); the tabs take the
    rest. Inside the tab set, `.mud-tabs` and `.mud-tabs-panels` are given `flex: 1 1 auto; min-height: 0` here, since
    MudBlazor grants the panels area flex-grow only when Rounded is on, and the bar is pinned at its own height.

    `.mud-tab-panel` is never styled (MyCRM's rule): MudBlazor hides the inactive panel by its lack of a class and shows
    the active one as display: contents, so a rule there would paint both panels or be discarded. The active panel's
    children (the timeline and the comment box, or the history) are therefore flex items of `.mud-tabs-panels`, and
    each of those components sizes and scrolls itself from its own root.
*/

.ticket-panel[b-wiiwci387h] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 12px 16px 16px;
    position: relative;
}

/* The left edge, a drag handle (TicketPanel.razor.js); it shows the highlight colour on hover, focus and while dragged. */
.ticket-panel-resize[b-wiiwci387h] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
    z-index: 1;
}

.ticket-panel-resize:hover[b-wiiwci387h],
.ticket-panel-resize:focus-visible[b-wiiwci387h],
.ticket-panel-resize.ticket-panel-resize-active[b-wiiwci387h] {
    background-color: var(--mud-palette-primary);
    outline: none;
}

.ticket-panel-head[b-wiiwci387h] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 8px;
}

.ticket-panel-head[b-wiiwci387h]  .ticket-panel-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

/* The reference over the title, in the loaded state's header. */
.ticket-panel-heading[b-wiiwci387h] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ticket-panel-reference[b-wiiwci387h] {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.ticket-panel-message[b-wiiwci387h] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.ticket-panel-top[b-wiiwci387h] {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: 12px;
    max-height: 50%;
    min-height: 0;
    overflow-y: auto;
}

.ticket-panel-actions[b-wiiwci387h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ticket-panel-status[b-wiiwci387h] {
    flex: 1 1 180px;
    max-width: 240px;
}

.ticket-panel-fields[b-wiiwci387h] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    margin: 0;
    font-size: 0.875rem;
}

.ticket-panel-fields dt[b-wiiwci387h] {
    color: var(--mud-palette-text-secondary);
}

.ticket-panel-fields dd[b-wiiwci387h] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ticket-panel-fields[b-wiiwci387h]  .mud-chip {
    margin: 0;
}

.ticket-panel-fields[b-wiiwci387h]  .ticket-panel-actor {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ticket-panel-fields[b-wiiwci387h]  .ticket-panel-actor .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-primary);
}

.ticket-panel-due.ticket-panel-overdue[b-wiiwci387h] {
    color: var(--mud-palette-error);
    font-weight: 500;
}

.ticket-panel-description[b-wiiwci387h] {
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-panel-tabs[b-wiiwci387h] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ticket-panel-tabs[b-wiiwci387h]  .mud-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ticket-panel-tabs[b-wiiwci387h]  .mud-tabs-tabbar {
    flex: 0 0 auto;
}

.ticket-panel-tabs[b-wiiwci387h]  .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 0;
    padding-top: 8px;
}

@media (max-width: 599px) {
    .ticket-panel[b-wiiwci387h] {
        padding: 8px 12px 12px;
    }

    /* The panel is the full width of a phone anyway. */
    .ticket-panel-resize[b-wiiwci387h] {
        display: none;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
    Anchored on `.app-shell` and `.app-main`, which this component renders itself; MudMainContent's root is MudBlazor's
    and carries no scope attribute, so it is reached with ::deep below the anchor (MyCRM's "Scoped CSS" rule).

    MudMainContent pads its top by the app bar's height (which MudBlazor varies by screen size), so giving it the whole
    window height with border-box sizing leaves exactly the area below the app bar for `.app-main`, at every size.
*/

.app-shell[b-2ek1zgv4ay]  .mud-main-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.app-main[b-2ek1zgv4ay] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
/* /Pages/Home.razor.rz.scp.css */
/*
    Anchored on `.home`, the first element this page renders itself (MyCRM's "Scoped CSS" rule). The cards, chips and
    icons are MudBlazor's, so everything inside them is reached with ::deep from `.home`, even this page's own markup,
    which sits inside a MudCard's content and would otherwise lose its scope if a wrapper became a component.
*/

.home[b-2hg4r4ij31] {
    min-width: 0;
}

.home[b-2hg4r4ij31]  .home-card {
    height: 100%;
}

.home[b-2hg4r4ij31]  .home-group + .home-group {
    margin-top: 16px;
}

.home[b-2hg4r4ij31]  .home-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.home[b-2hg4r4ij31]  .home-group-count {
    font-weight: 400;
}

/* Overdue stands out: its heading in the error colour and a rule of it down the group's left side. */
.home[b-2hg4r4ij31]  .home-group-overdue {
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-error);
}

.home[b-2hg4r4ij31]  .home-group-overdue .home-group-title {
    color: var(--mud-palette-error);
}

.home[b-2hg4r4ij31]  .home-work-list,
.home[b-2hg4r4ij31]  .home-project-list,
.home[b-2hg4r4ij31]  .home-activity-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home[b-2hg4r4ij31]  .home-work-list {
    gap: 6px;
}

/* The priority's colour comes inline as the left border's colour (decision 23); this gives it its width and a fallback. */
.home[b-2hg4r4ij31]  .home-work-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background);
}

.home[b-2hg4r4ij31]  .home-work-title {
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.home[b-2hg4r4ij31]  .home-reference {
    margin-right: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.home[b-2hg4r4ij31]  .home-work-title:hover,
.home[b-2hg4r4ij31]  .home-work-title:focus-visible {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.home[b-2hg4r4ij31]  .home-work-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.home[b-2hg4r4ij31]  .home-work-meta .mud-chip {
    margin: 0;
}

.home[b-2hg4r4ij31]  .home-due {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.home[b-2hg4r4ij31]  .home-due-overdue {
    color: var(--mud-palette-error);
    font-weight: 500;
}

.home[b-2hg4r4ij31]  .home-project-list {
    gap: 14px;
}

.home[b-2hg4r4ij31]  .home-project {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home[b-2hg4r4ij31]  .home-project-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.home[b-2hg4r4ij31]  .home-project-name {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.home[b-2hg4r4ij31]  .home-project-name:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.home[b-2hg4r4ij31]  .home-project-counts {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.home[b-2hg4r4ij31]  .home-activity-list {
    gap: 6px;
}

.home[b-2hg4r4ij31]  .home-activity-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.home[b-2hg4r4ij31]  .home-activity-who {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.home[b-2hg4r4ij31]  .home-activity-when,
.home[b-2hg4r4ij31]  .home-activity-sep {
    color: var(--mud-palette-text-secondary);
}

.home[b-2hg4r4ij31]  .home-activity-item a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.home[b-2hg4r4ij31]  .home-activity-item a:hover {
    text-decoration: underline;
}
/* /Pages/ProjectBoard.razor.rz.scp.css */
/*
    Anchored on `.board`, the last element this page renders itself (MyCRM's "Scoped CSS" rule). From the drop container
    down the roots are MudBlazor's (the container's div, each drop zone's div), so every rule below it goes through
    ::deep from `.board`; the lane sections and headers are this page's own markup, but they sit inside the container
    and are reached the same way so the chain cannot break silently if one of them becomes a MudBlazor component.

    The height chain: PageShell's content is a flex column of bounded height; `.board`, the grid, each lane and each
    lane's body all take `flex: 1 1 auto; min-height: 0` (or a 1fr grid row of minmax(0, …)), so only a lane's body
    scrolls vertically, and only the grid scrolls sideways, once the lanes reach their 220 px floor.
*/

.board[b-wzrr92juuz] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.board-lanes-picker[b-wzrr92juuz] {
    width: 220px;
}

/* The grid's columns come inline: repeat(N, minmax(220px, 1fr)), N the number of shown lanes. overflow-y is pinned to
   hidden on purpose: setting overflow-x alone would coerce overflow-y from visible to auto. */
.board[b-wzrr92juuz]  .board-grid {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.board[b-wzrr92juuz]  .board-lane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.board[b-wzrr92juuz]  .board-lane-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.board[b-wzrr92juuz]  .board-lane-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The drop zone's own root: the part of a lane that scrolls. */
.board[b-wzrr92juuz]  .board-lane-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

/* ApplyDropClassesOnDragStarted marks every lane the moment a drag starts: the others as targets, the card's own as
   not one. */
.board[b-wzrr92juuz]  .lane-can-drop {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
    background-color: rgb(from var(--mud-palette-primary) r g b / 8%);
}

.board[b-wzrr92juuz]  .lane-no-drop {
    opacity: 0.6;
}

@media (max-width: 599px) {
    .board-lanes-picker[b-wzrr92juuz] {
        width: 100%;
    }
}