@import '_content/Anvil.Client.RCL/Anvil.Client.RCL.rsjp1ln3w7.bundle.scp.css';

/* /Features/AiCompanion/AiCompanionPage.razor.rz.scp.css */
.ai-page[b-y477uwklmp] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-page__title[b-y477uwklmp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-page__desc[b-y477uwklmp] {
    color: var(--mud-palette-text-secondary);
}

/* MudText/MudIcon carry no b-xxxx scope attribute (ADR-0019), so the disclaimer is reached
   with ::deep from .ai-page — a plain div this component emits. */
.ai-page[b-y477uwklmp]  .ai-page__disclaimer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 1rem 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ai-page[b-y477uwklmp]  .ai-page__disclaimer .mud-icon-root {
    font-size: 1rem;
}

.ai-page__options[b-y477uwklmp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-top: 0.75rem;
}

/* MudText carries no scope attribute (ADR-0019), so the hint is reached with ::deep. */
.ai-page[b-y477uwklmp]  .ai-page__options-hint {
    display: block;
    color: var(--mud-palette-text-secondary);
}

.ai-page__progress[b-y477uwklmp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-node[b-y477uwklmp] {
    padding: 0.25rem 0 0.25rem 0;
}

.ai-node__row[b-y477uwklmp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-node__icon[b-y477uwklmp] {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.ai-node__type[b-y477uwklmp] {
    flex-shrink: 0;
}

.ai-node__summary[b-y477uwklmp] {
    flex: 1 1 auto;
}

.ai-node__meta[b-y477uwklmp] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-left: 2rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.ai-node__meta-item[b-y477uwklmp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ai-node__description[b-y477uwklmp] {
    margin-left: 2rem;
}

.ai-node__children[b-y477uwklmp] {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--mud-palette-lines-default);
}
/* /Features/Configuration/ApplicationModePage.razor.rz.scp.css */
/* First-run setup screen. The option cards and everything inside them are rendered by MudBlazor
   components (radio group, icons), whose elements never carry this component's scope attribute, so
   the rules below are reached through ::deep from the scoped page root. */
.appmode-page[b-hsqdtov1nk] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 44rem;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────── */
.appmode-intro[b-hsqdtov1nk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.appmode-intro__icon-wrap[b-hsqdtov1nk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    margin-bottom: 0.25rem;
}

.appmode-page[b-hsqdtov1nk]  .appmode-intro__title {
    font-weight: 700;
    text-align: center;
}

/* Mode option cards use the shared `.config-option` rules in ConfigurationLayout.razor.css. */

/* ── Structure graphic ───────────────────────────────────────────── */
/* Indentation is structural (nested levels + connectors), so it holds at any text length. */
.appmode-page[b-hsqdtov1nk]  .appmode-graphic {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.appmode-page[b-hsqdtov1nk]  .hw-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.appmode-page[b-hsqdtov1nk]  .hw-row--l1 { padding-left: 1.25rem; }
.appmode-page[b-hsqdtov1nk]  .hw-row--l2 { padding-left: 2.75rem; }
.appmode-page[b-hsqdtov1nk]  .hw-row--l3 { padding-left: 4.25rem; }

.appmode-page[b-hsqdtov1nk]  .hw-row__connector {
    font-family: monospace;
    opacity: 0.4;
    font-size: 0.85rem;
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
}

.appmode-page[b-hsqdtov1nk]  .hw-row__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.appmode-page[b-hsqdtov1nk]  .hw-row__content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.appmode-page[b-hsqdtov1nk]  .hw-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Strikethrough alone marks the row as done — dimming it too would drop the label below AA. */
.appmode-page[b-hsqdtov1nk]  .hw-row__name--done {
    text-decoration: line-through;
}

/* Secondary text at this size lands a hair under AA on the graphic's tinted background, so both the
   row description and the badge are mixed a step toward the primary text color in either theme. */
.appmode-page[b-hsqdtov1nk]  .hw-row__desc {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 50%, var(--mud-palette-text-primary));
    line-height: 1.4;
}

.appmode-page[b-hsqdtov1nk]  .hw-row__badge {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 50%, var(--mud-palette-text-primary));
    background-color: var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
}

/* ── Tip ─────────────────────────────────────────────────────────── */
.appmode-tip[b-hsqdtov1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.appmode-tip[b-hsqdtov1nk]  .appmode-tip__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Actions ─────────────────────────────────────────────────────── */
.appmode-actions[b-hsqdtov1nk] {
    display: flex;
    justify-content: flex-end;
}
/* /Features/Configuration/BrandingPage.razor.rz.scp.css */
.branding-logo-row[b-svpmivhn19] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Preview on the primary color so transparent logos are seen as they appear in
   the app bar, at the exact size/rounding the app bar renders them (40px / 7px). */
.branding-logo-preview[b-svpmivhn19] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--mud-default-borderradius);
    border: 1px dashed var(--mud-palette-lines-default);
    overflow: hidden;
}

.branding-logo-preview img[b-svpmivhn19] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 7px;
    background-color: var(--mud-palette-primary);
}
/* /Features/Configuration/ConfigurationLayout.razor.rz.scp.css */
/* Two-column settings shell: a sticky section menu beside the scrolling section body. */
.config-shell[b-n1eb4pcok9] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    align-items: start;
}

/* ── Section menu ──────────────────────────────────────────────── */
.config-nav[b-n1eb4pcok9] {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 1rem;
    border-right: 1px solid var(--mud-palette-lines-default);
}

    /* MudNavMenu paints its own surface; the menu sits on the page here, so drop it.
   ::deep because the menu root is MudNavMenu's element, not this layout's, and !important
   to outrank the global `.mud-navmenu { background-color: #1a1a1a !important }` in
   wwwroot/css/mudblazor-overrides.css — an !important there beats any plain rule. */
    .config-nav[b-n1eb4pcok9]  .mud-navmenu {
        background-color: transparent !important;
    }

    /* Anchored on .config-nav (an element this component owns) with ::deep: the "config-nav__back"
   class lives on MudButton's rendered <a>, which CSS isolation never scopes on its own — a bare
   `.config-nav__back { ... }` selector here would silently never match. */
    .config-nav[b-n1eb4pcok9]  .config-nav__back {
        justify-content: flex-start;
        align-self: flex-start;
        color: var(--mud-palette-text-primary);
    }

        /* Logout icon's arrow exits to the right by default; mirror it so it points left. */
        .config-nav[b-n1eb4pcok9]  .config-nav__back .mud-button-icon-start {
            rotate: 180deg;
        }

.config-nav__group[b-n1eb4pcok9] {
    margin: 0.75rem 0 0.25rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

    .config-nav__group:first-child[b-n1eb4pcok9] {
        margin-top: 0;
    }

/* ── Section body ──────────────────────────────────────────────── */
/* The rules below cross into the page rendered as @Body, so they need ::deep. */
.config-content[b-n1eb4pcok9] {
    min-width: 0;
}

    .config-content[b-n1eb4pcok9]  .config-page__title {
        margin-bottom: 0.25rem;
    }

    .config-content[b-n1eb4pcok9]  .config-page__desc {
        display: block;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 1.5rem;
    }

    .config-content[b-n1eb4pcok9]  .config-section__desc {
        color: var(--mud-palette-text-secondary);
        margin-top: 0.25rem;
    }

    .config-content[b-n1eb4pcok9]  .config-section .mud-card-actions {
        justify-content: flex-end;
        padding: 0.5rem 1rem 1rem;
    }

    /* ── Option cards ──────────────────────────────────────────────── */
    /* Radio-selectable cards shared by the settings pages that present a choice (application mode,
   registration). Defined here so both pages stay visually identical; ::deep because the cards are
   rendered by the page in @Body and by MudBlazor, neither of which carries this layout's scope. */
    .config-content[b-n1eb4pcok9]  .config-option {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .config-content[b-n1eb4pcok9]  .config-option + .config-option {
            margin-top: 1rem;
        }

        .config-content[b-n1eb4pcok9]  .config-option:hover {
            border-color: var(--mud-palette-primary);
        }

    .config-content[b-n1eb4pcok9]  .config-option--selected {
        border-color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover);
    }

    /* Not dimmed: the disabled radio already reads as unavailable and lowering the opacity would
   drop the card's text under AA. Only the affordances change. */
    .config-content[b-n1eb4pcok9]  .config-option--disabled {
        cursor: not-allowed;
    }

        .config-content[b-n1eb4pcok9]  .config-option--disabled:hover {
            border-color: var(--mud-palette-lines-default);
        }

    .config-content[b-n1eb4pcok9]  .config-option__head {
        display: flex;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .config-content[b-n1eb4pcok9]  .config-option__text {
        min-width: 0;
    }

    .config-content[b-n1eb4pcok9]  .config-option__title {
        font-weight: 600;
    }
/* ── Narrow viewports: menu collapses above the content ────────── */
@media (max-width: 55rem) {
    .config-shell[b-n1eb4pcok9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .config-nav[b-n1eb4pcok9] {
        position: static;
        padding-right: 0;
        padding-bottom: 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
}
/* /Features/Configuration/RegistrationPage.razor.rz.scp.css */
/* Option cards themselves are styled by the shared `.config-option` rules in
   ConfigurationLayout.razor.css — only the registration-code row is page-specific.
   ::deep throughout: every element in the row is rendered by MudBlazor (input control, tooltip
   wrapper, icon button), so none of them carries this page's scope attribute. */

/* Field + copy button on one line; the field's helper text makes the row taller than the button,
   so the button is pinned to the top rather than centred. */
.reg-code[b-hapmj3rb1e] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.reg-code[b-hapmj3rb1e]  .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* MudTooltip wraps the button, so the flex child is the wrapper. */
.reg-code[b-hapmj3rb1e]  .mud-tooltip-root {
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.reg-actions[b-hapmj3rb1e] {
    display: flex;
    justify-content: flex-end;
}
/* /Features/Gallery/GalleryPage.razor.rz.scp.css */
.gallery-page[b-4qyhess8is] {
    padding: 1rem 1.25rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.gallery-page__header[b-4qyhess8is] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Masonry via CSS multi-column: tiles keep their natural aspect ratio and flow
   into balanced columns. break-inside avoids splitting a tile across columns. */
.gallery-grid[b-4qyhess8is] {
    column-count: 4;
    column-gap: 1rem;
}

@media (max-width: 1200px) {
    .gallery-grid[b-4qyhess8is] { column-count: 3; }
}

@media (max-width: 800px) {
    .gallery-grid[b-4qyhess8is] { column-count: 2; }
}

@media (max-width: 500px) {
    .gallery-grid[b-4qyhess8is] { column-count: 1; }
}

.gallery-tile[b-4qyhess8is] {
    position: relative;
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.gallery-tile:hover[b-4qyhess8is] {
    box-shadow: var(--mud-elevation-8);
    transform: translateY(-2px);
}

.gallery-tile__img[b-4qyhess8is] {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.gallery-tile__overlay[b-4qyhess8is] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 150ms ease;
}

.gallery-tile:hover .gallery-tile__overlay[b-4qyhess8is],
.gallery-tile:focus-within .gallery-tile__overlay[b-4qyhess8is] {
    opacity: 1;
}

.gallery-tile__name[b-4qyhess8is] {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-tile__actions[b-4qyhess8is] {
    display: flex;
    flex-shrink: 0;
}

.gallery-tile__overlay[b-4qyhess8is]  .mud-icon-button {
    color: #fff;
}

/* Empty state */
.gallery-empty[b-4qyhess8is] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    border-radius: 16px;
    border-style: dashed;
}

.gallery-empty__icon[b-4qyhess8is] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover);
}

/* Lightbox */
.gallery-lightbox[b-4qyhess8is] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.gallery-lightbox__img[b-4qyhess8is] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox__close[b-4qyhess8is] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
}
/* /Features/Home/HomePage.razor.rz.scp.css */
/* ── Home dashboard ────────────────────────────────────────────────────────
   Tile-based landing page. All colors derive from the MudBlazor palette so
   light & dark modes are covered without hardcoding; tinted foregrounds are
   mixed toward text-primary so they pass WCAG contrast in both themes.      */

.hm-root[b-i6rzl9bd75] {
    width: 100%;
    max-width: 88rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--mud-palette-text-primary);
}

/* ── Header ───────────────────────────────────────────────────────────────*/
.hm-head[b-i6rzl9bd75] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hm-head__title[b-i6rzl9bd75] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.hm-head__date[b-i6rzl9bd75] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/* Header call to action: create a work item.
   The fill is the primary color darkened toward black, the same trick the filled
   snackbars use — the primary is user-configurable (amber and the other light
   presets are all reachable), and white on a raw primary fill measures ~3:1.
   Both gradient stops sit at or below the 62% mix that keeps the lightest
   preset above 4.5:1, so the label stays readable whatever primary is chosen.
   Hover lifts and deepens the shadow only: brightening the fill would eat the
   contrast the darkening just bought. */
.hm-cta[b-i6rzl9bd75] {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border-radius: 999rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 62%, #000),
        color-mix(in srgb, var(--mud-palette-primary) 46%, #000));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.hm-cta:hover[b-i6rzl9bd75] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
}

.hm-cta:active[b-i6rzl9bd75] {
    transform: translateY(0);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.hm-cta:focus-visible[b-i6rzl9bd75] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Glyph disc: a translucent white well punched into the fill. */
.hm-cta__glyph[b-i6rzl9bd75] {
    flex: none;
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.2);
}

.hm-cta__glyph[b-i6rzl9bd75]  .mud-icon-root { font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
    .hm-cta[b-i6rzl9bd75] { transition: none; }
    .hm-cta:hover[b-i6rzl9bd75] { transform: none; }
}

/* ── Tile grid ────────────────────────────────────────────────────────────*/
.hm-grid[b-i6rzl9bd75] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    align-items: start;
}

.hm-tile[b-i6rzl9bd75] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.9rem;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.hm-tile--project[b-i6rzl9bd75] { grid-column: span 12; }
/* Assigned takes the larger share — it splits into two status columns; the teams tile is a
   single list. The widened root (88rem) still leaves the teams tile room for both date chips. */
.hm-tile--assigned[b-i6rzl9bd75] { grid-column: span 7; }
.hm-tile--teams[b-i6rzl9bd75] { grid-column: span 5; }
.hm-tile--full[b-i6rzl9bd75] { grid-column: span 12; }

@media (max-width: 60rem) {
    .hm-tile--assigned[b-i6rzl9bd75],
    .hm-tile--teams[b-i6rzl9bd75] { grid-column: span 12; }
}

/* Shared tile head: icon + title + count pill (+ trailing action). */
.hm-tile__head[b-i6rzl9bd75] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.hm-tile__title[b-i6rzl9bd75] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-count[b-i6rzl9bd75] {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.22rem 0.5rem;
    border-radius: 1rem;
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.hm-spacer[b-i6rzl9bd75] { flex: 1; }

/* Shared empty state inside a tile. */
.hm-tile__empty[b-i6rzl9bd75] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.25rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.hm-overline[b-i6rzl9bd75] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* Darkened toward text-primary: plain text-secondary lands a hair under 4.5:1
       on the hero tile's primary tint in light mode. */
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, var(--mud-palette-text-primary));
}

/* ── Working on project (hero) ────────────────────────────────────────────*/
.hm-tile--project[b-i6rzl9bd75] {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)),
            var(--mud-palette-surface) 58%);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hm-tile--project:has(.hm-stretch:hover)[b-i6rzl9bd75] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.hm-project__glyph[b-i6rzl9bd75] {
    flex: none;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 62%, var(--mud-palette-text-primary));
}

.hm-project__glyph[b-i6rzl9bd75]  .mud-icon-root { font-size: 1.7rem; }

.hm-project__text[b-i6rzl9bd75] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hm-project__name[b-i6rzl9bd75] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-project__name--empty[b-i6rzl9bd75] { color: var(--mud-palette-text-secondary); }

.hm-project__hint[b-i6rzl9bd75] {
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, var(--mud-palette-text-primary));
}

.hm-project__num[b-i6rzl9bd75] {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.18rem 0.5rem;
    border-radius: 1rem;
    /* 45% (not the usual 55%): this pill's tint stacks on the hero gradient's tint,
       so the foreground needs the extra push toward text-primary to hold 4.5:1. */
    color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* "Current project only" — sits beside the name, so it never grows with the tile. Its label is
   trimmed to chip scale: at default size it competes with the project name it qualifies. */
.hm-project__scope[b-i6rzl9bd75] {
    flex: none;
    margin-left: 0.75rem;
}

.hm-project__scope[b-i6rzl9bd75]  .mud-switch-label {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, var(--mud-palette-text-primary));
}

.hm-project__arrow[b-i6rzl9bd75] {
    color: var(--mud-palette-text-secondary);
    transition: transform 120ms ease;
}

.hm-tile--project:has(.hm-stretch:hover) .hm-project__arrow[b-i6rzl9bd75] {
    transform: translateX(0.2rem);
    color: color-mix(in srgb, var(--mud-palette-primary) 62%, var(--mud-palette-text-primary));
}

/* Stretched link: the project name's hit area covers the whole tile, while the
   explicit buttons sit above it (hm-raised) and keep their own click targets. */
.hm-stretch[b-i6rzl9bd75]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hm-raised[b-i6rzl9bd75] { position: relative; z-index: 1; }

/* ── Assigned to me ───────────────────────────────────────────────────────*/
.hm-cols[b-i6rzl9bd75] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 40rem) {
    .hm-cols[b-i6rzl9bd75] { grid-template-columns: 1fr; }
}

.hm-col[b-i6rzl9bd75] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.hm-col__head[b-i6rzl9bd75] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hm-col__title[b-i6rzl9bd75] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hm-col__count[b-i6rzl9bd75] {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.hm-col__empty[b-i6rzl9bd75] {
    padding: 0.75rem 0.25rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.hm-row[b-i6rzl9bd75] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    transition: background-color 100ms ease;
}

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

/* Identity cluster: type glyph, project glyph, number. One grid cell, so a row without a
   project still lines its summary up with the rows that have one. */
.hm-row__id[b-i6rzl9bd75] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.hm-row__id[b-i6rzl9bd75]  .mud-icon-root { font-size: 0.95rem; }

/* Classes land on MudBlazor-rendered elements, so they need ::deep to escape the scope. */
.hm-row__id[b-i6rzl9bd75]  .hm-row__type { color: var(--mud-palette-text-secondary); }

.hm-row__id[b-i6rzl9bd75]  .hm-row__proj {
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
}

.hm-row__num[b-i6rzl9bd75] {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.hm-row__summary[b-i6rzl9bd75] {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-row__start[b-i6rzl9bd75] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.hm-row__start[b-i6rzl9bd75]  .mud-icon-root { font-size: 0.9rem; }

/* Not started yet: the date is ahead of today, so it reads as upcoming rather than current work. */
.hm-row__start--future[b-i6rzl9bd75] {
    font-weight: 700;
    color: color-mix(in srgb, var(--mud-palette-info) 55%, var(--mud-palette-text-primary));
}

.hm-row__due[b-i6rzl9bd75] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.hm-row__due[b-i6rzl9bd75]  .mud-icon-root { font-size: 0.9rem; }

.hm-row__due--over[b-i6rzl9bd75] {
    font-weight: 700;
    color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-primary));
}

.hm-more[b-i6rzl9bd75] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding: 0.15rem 0.5rem;
    margin-inline: -0.5rem;
    border: 0;
    background: none;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
}

.hm-more[b-i6rzl9bd75]  .mud-icon-root { font-size: 1rem; }

.hm-more:hover[b-i6rzl9bd75] {
    background: var(--mud-palette-action-default-hover);
    text-decoration: underline;
}

/* ── My work teams ────────────────────────────────────────────────────────*/
.hm-teams[b-i6rzl9bd75] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hm-team[b-i6rzl9bd75] {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0;
    min-width: 0;
}

.hm-team + .hm-team[b-i6rzl9bd75] { border-top: 1px solid var(--mud-palette-lines-default); }

.hm-team__head[b-i6rzl9bd75] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* Note shown when none of the user's teams has unassigned work to take. */
.hm-teams__none[b-i6rzl9bd75] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 0.2rem;
}

/* ── Team pool (unassigned takeable items) ────────────────────────────────*/
.hm-pool[b-i6rzl9bd75] {
    list-style: none;
    margin: 0.25rem 0 0;
    /* Indent under the team name: avatar (1.9rem) + gap (0.6rem). */
    padding: 0 0 0 2.5rem;
    display: flex;
    flex-direction: column;
}

.hm-pool__item[b-i6rzl9bd75] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.hm-pool__row[b-i6rzl9bd75] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The Take button is wrapped in a tooltip, so the row's non-shrinking item is the
   tooltip root (MudBlazor markup — needs ::deep), not the button itself. */
.hm-take[b-i6rzl9bd75] { flex: none; }
.hm-pool__item[b-i6rzl9bd75]  .mud-tooltip-root { flex: none; }

.hm-team__avatar[b-i6rzl9bd75] {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
}

.hm-team__name[b-i6rzl9bd75] {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hm-team__mgr[b-i6rzl9bd75] {
    color: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--mud-palette-text-primary));
}

.hm-team__count[b-i6rzl9bd75] {
    margin-left: auto;
    flex: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* /Features/Reports/SpentReportPage.razor.rz.scp.css */
.spent-report[b-eklkkhf9qi] {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: 1rem;
}

/* Collapsible filter area: a slim always-visible header, then the pickers behind a MudCollapse. */
.spent-report__filter-shell[b-eklkkhf9qi] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.spent-report__filter-head[b-eklkkhf9qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
}

.spent-report__filter-range[b-eklkkhf9qi] {
    color: var(--mud-palette-text-secondary);
}

.spent-report__filters[b-eklkkhf9qi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.25rem 0.75rem 0.75rem;
}

.spent-report__filter[b-eklkkhf9qi] {
    flex: 1 1 12rem;
    min-width: 11rem;
}

/* Tags read as a chip container rather than a field, so the cell carries its own small label. */
.spent-report__filter--tags[b-eklkkhf9qi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.spent-report__filter-label[b-eklkkhf9qi] {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

.spent-report__status-opt[b-eklkkhf9qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.spent-report__filter-actions[b-eklkkhf9qi] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 0 0 auto;
    justify-content: center;
}

.spent-report__totals[b-eklkkhf9qi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.spent-report__total-card[b-eklkkhf9qi] {
    padding: 0.5rem 1rem;
    min-width: 10rem;
}

/* Push the export button to the trailing edge of the totals row, vertically centered with the cards. */
.spent-report__export[b-eklkkhf9qi] {
    margin-left: auto;
    align-self: center;
}

/* First row of the totals band: the view toggle, then (table view only) the group-by controls. */
.spent-report__toolbar[b-eklkkhf9qi] {
    flex-basis: 100%;
    order: -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
    width: 100%;
}

.spent-report__view[b-eklkkhf9qi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    flex: 0 0 auto;
}

.spent-report__groupby[b-eklkkhf9qi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.spent-report__groupby-row[b-eklkkhf9qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.spent-report__grid[b-eklkkhf9qi] {
    min-height: 0;
}

.spent-report__work[b-eklkkhf9qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.spent-report__group-header[b-eklkkhf9qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spent-report__group-icon[b-eklkkhf9qi] {
    color: var(--mud-palette-primary);
}

/* Group-by toggle items: icon + label inline. */
.spent-report__gb[b-eklkkhf9qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.spent-report__group-totals[b-eklkkhf9qi] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* Darkened toward the text color so it stays >= 4.5:1 on the row background in both themes. */
.spent-report__negative[b-eklkkhf9qi] {
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    font-weight: 600;
}

.spent-report__cap-note[b-eklkkhf9qi] {
    margin-bottom: 0;
}

/* ── Charts view ──────────────────────────────────────────────────────────── */

/* Spans the (empty) cap-note row plus the flexible grid row, so the charts stack scrolls inside the
   page instead of overflowing it. */
.spent-report__charts[b-eklkkhf9qi] {
    grid-row: 4 / 6;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.spent-report__charts-grid[b-eklkkhf9qi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.spent-report__chart-card[b-eklkkhf9qi] {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.spent-report__chart-card--wide[b-eklkkhf9qi] {
    grid-column: 1 / -1;
}

.spent-report__chart-title[b-eklkkhf9qi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-primary);
}

.spent-report__chart-title .mud-icon-root[b-eklkkhf9qi] {
    color: var(--mud-palette-primary);
}

.spent-report__chart-empty[b-eklkkhf9qi] {
    color: var(--mud-palette-text-secondary);
    padding: 0.75rem 0;
}

/* Breakdown rows: label | thin bar | value (same anatomy as the dashboard cards). */
.spent-report__chart-row[b-eklkkhf9qi] {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.22rem 0;
}

.spent-report__chart-row-label[b-eklkkhf9qi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

.spent-report__chart-row-track[b-eklkkhf9qi] {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    overflow: hidden;
    min-width: 0;
}

/* Single-series bars all wear the theme's primary hue; rounded at the data end, square at the baseline. */
.spent-report__chart-row-bar[b-eklkkhf9qi] {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--mud-palette-primary);
}

/* The "Others" rollup and the no-value buckets recede so named groups stay the subject. */
.spent-report__chart-row--muted .spent-report__chart-row-label[b-eklkkhf9qi] {
    color: var(--mud-palette-text-secondary);
}

.spent-report__chart-row--muted .spent-report__chart-row-bar[b-eklkkhf9qi] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
}

.spent-report__chart-row--muted .spent-report__chart-row-track[b-eklkkhf9qi] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.spent-report__chart-row-value[b-eklkkhf9qi] {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}
/* /Features/Reports/WorksDashboardPage.razor.rz.scp.css */
.works-dash[b-uz8uxfv8rh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

.works-dash__filters[b-uz8uxfv8rh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.works-dash__filter[b-uz8uxfv8rh] {
    flex: 0 1 20rem;
    min-width: 14rem;
}

.works-dash__filter-actions[b-uz8uxfv8rh] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 0 0 auto;
}

/* Refetch keeps the previous render visible, just dimmed — no skeleton flash or layout jump. */
.works-dash__body[b-uz8uxfv8rh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: opacity 120ms ease;
}

.works-dash__body--reloading[b-uz8uxfv8rh] {
    opacity: 0.55;
    pointer-events: none;
}

.works-dash__tiles[b-uz8uxfv8rh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.works-dash__tile[b-uz8uxfv8rh] {
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Darkened toward the text color so it stays >= 4.5:1 in both themes (same recipe as the spent report). */
.works-dash__tile-alert[b-uz8uxfv8rh] {
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
}

.works-dash__tile-sub[b-uz8uxfv8rh] {
    color: var(--mud-palette-text-secondary);
}

.works-dash__grid[b-uz8uxfv8rh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.works-dash__card[b-uz8uxfv8rh] {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.works-dash__card--wide[b-uz8uxfv8rh] {
    grid-column: 1 / -1;
}

.works-dash__card-title[b-uz8uxfv8rh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-primary);
}

/* ::deep is required: .mud-icon-root belongs to MudIcon, so it never carries this component's
   scope attribute and a plainly-scoped selector silently never matches. */
.works-dash__card-title[b-uz8uxfv8rh]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* The caveat hint reads as secondary chrome, not another titled section. */
.works-dash__card-title[b-uz8uxfv8rh]  .works-dash__card-hint {
    color: var(--mud-palette-text-secondary);
}

.works-dash__empty[b-uz8uxfv8rh] {
    color: var(--mud-palette-text-secondary);
    padding: 0.75rem 0;
}

/* ── Breakdown rows: label | thin bar | value ─────────────────────────────── */

.works-dash__row[b-uz8uxfv8rh] {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.22rem 0;
}

.works-dash__row-label[b-uz8uxfv8rh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

.works-dash__row-track[b-uz8uxfv8rh] {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    overflow: hidden;
    min-width: 0;
}

/* Single-series bars all wear the theme's primary hue; rounded at the data end, square at the baseline. */
.works-dash__row-bar[b-uz8uxfv8rh] {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--mud-palette-primary);
}

/* The "Others" rollup and the no-value bucket recede so named groups stay the subject. */
.works-dash__row--muted .works-dash__row-label[b-uz8uxfv8rh] {
    color: var(--mud-palette-text-secondary);
}

.works-dash__row--muted .works-dash__row-bar[b-uz8uxfv8rh] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
}

.works-dash__row--muted .works-dash__row-track[b-uz8uxfv8rh] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.works-dash__row-value[b-uz8uxfv8rh] {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.works-dash__negative[b-uz8uxfv8rh] {
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    font-weight: 600;
}
/* /Features/Tasks/TaskCategories/TaskCategoryEdit.razor.rz.scp.css */
.edit-header[b-l5zs9xfai7] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.edit-header h4[b-l5zs9xfai7] {
  margin-bottom: 0;
}

.task-category-wrapper[b-l5zs9xfai7] {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

.task-category-content[b-l5zs9xfai7] {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  padding-bottom: 1.5rem;
}

/* Action bar at the top; chrome (background, divider, shadow) comes from AnvFormActionButtons */
/* /Features/Tasks/TaskTypes/TaskTypeEdit.razor.rz.scp.css */
.edit-header[b-ncpymd3i7a] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.edit-header h4[b-ncpymd3i7a] {
  margin-bottom: 0;
}

.task-type-wrapper[b-ncpymd3i7a] {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

.task-type-content[b-ncpymd3i7a] {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  padding-bottom: 1.5rem;
}

/* Action bar at the top; chrome (background, divider, shadow) comes from AnvFormActionButtons */
/* /Features/Works/Components/AnvEditorSection.razor.rz.scp.css */
/* Collapsible editor section. The header reuses the editors' section-title look (micro-caps with
   a primary tick) so a collapsible group reads as the same kind of heading as a static one —
   only the chevron and the hover surface mark it as interactive.

   CSS isolation: classes handed to MudBlazor components (the chevron icon) do not carry the scope
   attribute, so those rules go through ::deep from the plain root div. */

.anv-editor-section[b-j66ij9fz5k] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.anv-editor-section__header[b-j66ij9fz5k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0.3rem 0.4rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.anv-editor-section__header:hover[b-j66ij9fz5k] {
    background-color: var(--mud-palette-action-default-hover);
}

.anv-editor-section__header:focus-visible[b-j66ij9fz5k] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.anv-editor-section__tick[b-j66ij9fz5k] {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

.anv-editor-section__title[b-j66ij9fz5k] {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Collapsed-state note: dimmer than the title but still AA against the surface. */
.anv-editor-section__hint[b-j66ij9fz5k] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.7rem;
    font-style: italic;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 80%, var(--mud-palette-text-primary));
}

.anv-editor-section[b-j66ij9fz5k]  .anv-editor-section__chevron {
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease;
}

.anv-editor-section[b-j66ij9fz5k]  .anv-editor-section__chevron--open {
    transform: rotate(180deg);
}

/* Collapse via animatable grid rows: the row goes 0fr → 1fr, so the panel opens to exactly its
   content height without anyone having to measure it. `min-height: 0` on the body lets the row
   actually reach zero (a grid item's automatic minimum size would otherwise hold it open). Kept
   `overflow: hidden` in both states — MudBlazor popovers (selects, date pickers) render in the
   body-level overlay, so nothing that needs to escape lives in here. */
.anv-editor-section__collapse[b-j66ij9fz5k] {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    transition: grid-template-rows 0.24s ease;
}

.anv-editor-section__collapse--open[b-j66ij9fz5k] {
    grid-template-rows: minmax(0, 1fr);
}

@media (prefers-reduced-motion: reduce) {
    .anv-editor-section[b-j66ij9fz5k]  .anv-editor-section__chevron {
        transition: none;
    }

    .anv-editor-section__collapse[b-j66ij9fz5k] {
        transition: none;
    }
}

/* The fields column relies on flex gap for vertical rhythm; the collapse wrapper is a plain block,
   so restore the same column layout inside it. Consumers whose column uses a different rhythm set
   --anv-editor-section-gap on any ancestor (custom properties inherit through CSS isolation).

   padding-top clears the first field's floating label: an outlined MudBlazor input parks its label
   straddling the top border, i.e. above the field's own box, and the collapse container clips
   anything that leaves it. */
.anv-editor-section__body[b-j66ij9fz5k] {
    display: flex;
    flex-direction: column;
    gap: var(--anv-editor-section-gap, 0.25rem);
    min-height: 0;
    padding-top: 0.6rem;
}
/* /Features/Works/Components/AnvEstimateTracker.razor.rz.scp.css */
.anv-estimate-tracker[b-gab5vd40j1] {
    width: 100%;
}

/* ── Header: title row, plus the collapsed-only slim progress bar ───────── */
.anv-et-title[b-gab5vd40j1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Title row: icon · total · add button · estimate (collapsed only) */
.anv-et-header[b-gab5vd40j1] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Collapsed estimate: small chip pinned to the top-right of the title row. */
.anv-et-estimate-slot[b-gab5vd40j1] {
    display: inline-flex;
    align-self: flex-start;
    margin-left: auto;
}

.anv-et-header-estimate[b-gab5vd40j1] {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background-color: var(--mud-palette-background-gray);
    /* Primary blended toward the text colour: readable on the gray chip in both themes
       (a --mud-palette-primary-text foreground would be white and vanish here). */
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
}

/* MudTooltip renders an inline-block wrapper, so the bar needs the slot stretched. */
.anv-et-bar-slot[b-gab5vd40j1] {
    width: 100%;
}

.anv-et-bar-slot[b-gab5vd40j1]  .mud-tooltip-root {
    display: block;
    width: 100%;
}

[b-gab5vd40j1] .anv-et-bar-mini {
    height: 6px;
    border-radius: 3px;
    background-color: var(--mud-palette-action-default-hover);
}

.anv-et-total[b-gab5vd40j1] {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
}

.anv-et-add[b-gab5vd40j1] {
    display: inline-flex;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.anv-et-body[b-gab5vd40j1] {
    padding-top: 4px;
}

.anv-et-estimate[b-gab5vd40j1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anv-et-estimate-label[b-gab5vd40j1] {
    min-width: 70px;
}

[b-gab5vd40j1] .anv-et-num {
    max-width: 3rem;
}

[b-gab5vd40j1] .anv-et-num-value {
    max-width: 160px;
}

.anv-et-update[b-gab5vd40j1] {
    margin-left: 8px;
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.anv-et-progress[b-gab5vd40j1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anv-et-progress-labels[b-gab5vd40j1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Full-width grey track; the coloured fill is the spent percentage. */
[b-gab5vd40j1] .anv-et-bar {
    height: 14px;
    border-radius: 7px;
    background-color: var(--mud-palette-action-default-hover);
}

/* ── Admin-only overwrite link ─────────────────────────────────────────── */
.anv-et-change[b-gab5vd40j1] {
    text-align: left;
}
/* /Features/Works/Components/AnvProjectSelector.razor.rz.scp.css */
/* ── AnvProjectSelector ────────────────────────────────────────────────────
   Dropdown rows only. Field sizing belongs to the owner's wrapper element: a class
   handed to a MudBlazor component lands on a child root, which the owner's plainly
   scoped selectors never match (ADR-0019).                                       */

/* Section heading (Active project / Recent projects / Projects). It is rendered as part of the first
   row of its section, so its top border doubles as the divider between sections. */
.anv-ps__section[b-0brryenuui] {
    margin-bottom: 0.3rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

/* A row: icon + name, the name truncating with an ellipsis (full text on hover). */
.anv-ps__opt[b-0brryenuui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 18rem;
}

.anv-ps__name[b-0brryenuui] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Features/Works/Components/AnvSearchWorkItem.razor.rz.scp.css */
.anv-search-work-item[b-ixdkqtm5x2] {
    display: flex;
    flex-direction: column;
}

.anv-search-work-item__primary[b-ixdkqtm5x2] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.anv-search-work-item__text-search[b-ixdkqtm5x2] {
    flex: 1 1 auto;
    min-width: 160px;
    margin-top: 5px;
    margin-bottom: -8px;
}

.anv-search-work-item__chip[b-ixdkqtm5x2] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

.anv-search-work-item__actions[b-ixdkqtm5x2] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

.anv-search-work-item__expand-wrap[b-ixdkqtm5x2] {
    position: relative;
    display: inline-flex;
}

.anv-search-work-item__filter-dot[b-ixdkqtm5x2] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    border: 2px solid var(--mud-palette-background);
    pointer-events: none;
}

.anv-search-work-item__advanced[b-ixdkqtm5x2] {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
}

.anv-search-work-item__grid[b-ixdkqtm5x2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: start;
}

.anv-search-work-item__grid[b-ixdkqtm5x2] >  .mud-input-control {
    margin: 0;
}

.anv-search-work-item__assignee[b-ixdkqtm5x2] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.anv-search-work-item__assignee[b-ixdkqtm5x2] >  .anv-search-work-item__assignee-input {
    flex: 1 1 auto;
    min-width: 0;
}

.anv-search-work-item__assignee--primary[b-ixdkqtm5x2] {
    flex: 0 1 280px;
    min-width: 200px;
}

.anv-search-work-item__tags[b-ixdkqtm5x2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.anv-search-work-item__tags-label[b-ixdkqtm5x2] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

@media (max-width: 960px) {
    .anv-search-work-item__grid[b-ixdkqtm5x2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .anv-search-work-item__grid[b-ixdkqtm5x2] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Works/Components/AnvWorkFilterBar.razor.rz.scp.css */
.anv-wf[b-7clg71ul88] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── top bar: search + actions ─────────────────────────────────────────────── */
.anv-wf__bar[b-7clg71ul88] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.anv-wf__search[b-7clg71ul88] {
    flex: 1 1 auto;
    min-width: 160px;
    margin-top: 4px;
    margin-bottom: -6px;
}

.anv-wf__bar-actions[b-7clg71ul88] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* ── active filter chips ───────────────────────────────────────────────────── */
.anv-wf__chips[b-7clg71ul88] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0 4px;
}

/* Same contrast rule as the shared AnvFilterBar shell: the label sits on a 13% tint of --c over the
   surface — nearly white in light mode — so a saturated --c as the text colour fails AA there. Mix
   it toward the theme's text colour (darker on light, lighter on dark); --c still drives border and
   tint, so the group colour classes below need no change. */
.anv-wf__chip[b-7clg71ul88] {
    --c: var(--mud-palette-primary);
    --c-text: color-mix(in srgb, var(--c) 35%, var(--mud-palette-text-primary));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 4px 0 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
    background-color: color-mix(in srgb, var(--c) 13%, var(--mud-palette-surface));
    max-width: 240px;
    animation: anv-wf-chip-in-b-7clg71ul88 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.anv-wf__chip:hover[b-7clg71ul88] {
    border-color: color-mix(in srgb, var(--c) 64%, transparent);
    background-color: color-mix(in srgb, var(--c) 20%, var(--mud-palette-surface));
}

.anv-wf__chip-icon[b-7clg71ul88] {
    font-size: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    opacity: 0.85;
}

.anv-wf__chip-text[b-7clg71ul88] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anv-wf__chip-remove[b-7clg71ul88] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-text);
    background-color: transparent;
    transition: background-color 110ms ease;
}

.anv-wf__chip-remove:hover[b-7clg71ul88] {
    background-color: color-mix(in srgb, var(--c) 28%, transparent);
}

.anv-wf__chip-x[b-7clg71ul88] {
    font-size: 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
}

/* ── facet panel ───────────────────────────────────────────────────────────── */
.anv-wf__panel[b-7clg71ul88] {
    margin-top: 2px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.anv-wf__facet[b-7clg71ul88] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.anv-wf__facet-label[b-7clg71ul88] {
    flex: 0 0 96px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
    padding-top: 5px;
}

.anv-wf__options[b-7clg71ul88] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
}

/* selectable option pills — outlined when off, filled with the group colour when on */
.anv-wf__opt[b-7clg71ul88] {
    --c: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    transition: all 120ms ease;
}

.anv-wf__opt:hover[b-7clg71ul88] {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background-color: color-mix(in srgb, var(--c) 9%, var(--mud-palette-surface));
}

.anv-wf__opt.is-on[b-7clg71ul88] {
    color: var(--c);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    background-color: color-mix(in srgb, var(--c) 15%, var(--mud-palette-surface));
}

.anv-wf__opt-icon[b-7clg71ul88] {
    font-size: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
    opacity: 0.8;
}

.anv-wf__pickers[b-7clg71ul88] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
}

.anv-wf__pickers[b-7clg71ul88] >  .mud-input-control {
    margin: 0;
}

/* user (assignee / created-by) pickers: the select fills the row, the me / unassigned icons sit
   centred against it */
.anv-wf__picker--user[b-7clg71ul88] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.anv-wf__user-select[b-7clg71ul88] {
    flex: 1 1 auto;
    min-width: 0;
}

/* AnvSelectUser brings its own MudItem/MudStack margins; strip them so it lines up with the plain
   outlined autocompletes/date pickers in the same grid */
.anv-wf__user-select[b-7clg71ul88] >  .mud-input-control {
    margin: 0;
}

/* tags cell: the AnvTagSelector is a chip container, not an outlined field, so give it its own
   caption label to sit alongside the labelled pickers in the grid */
.anv-wf__picker--tags[b-7clg71ul88] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 2px;
}

.anv-wf__picker-label[b-7clg71ul88] {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* ── group identifier colours ──────────────────────────────────────────────── */
.anv-wf--status[b-7clg71ul88] { --c: var(--mud-palette-info); }
.anv-wf--priority[b-7clg71ul88] { --c: var(--mud-palette-warning); }
.anv-wf--type[b-7clg71ul88] { --c: var(--mud-palette-tertiary); }
.anv-wf--task-type[b-7clg71ul88] { --c: var(--mud-palette-secondary); }
.anv-wf--customer-group[b-7clg71ul88] { --c: var(--mud-palette-primary); }
.anv-wf--customer[b-7clg71ul88] { --c: var(--mud-palette-success); }
.anv-wf--assignee[b-7clg71ul88] { --c: var(--mud-palette-error); }
.anv-wf--created-by[b-7clg71ul88] { --c: color-mix(in srgb, var(--mud-palette-info) 50%, var(--mud-palette-success)); }
.anv-wf--modified-by[b-7clg71ul88] { --c: color-mix(in srgb, var(--mud-palette-info) 50%, var(--mud-palette-warning)); }
/* the date facets share one neutral tone; their chip labels carry the distinction */
.anv-wf--start-date[b-7clg71ul88],
.anv-wf--due-date[b-7clg71ul88],
.anv-wf--created-date[b-7clg71ul88],
.anv-wf--modified-date[b-7clg71ul88] { --c: var(--mud-palette-text-secondary); }
.anv-wf--tag[b-7clg71ul88] { --c: color-mix(in srgb, var(--mud-palette-tertiary) 55%, var(--mud-palette-primary)); }
.anv-wf--customer-field[b-7clg71ul88] { --c: var(--mud-palette-warning); }

@keyframes anv-wf-chip-in-b-7clg71ul88 {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1080px) {
    .anv-wf__pickers[b-7clg71ul88] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .anv-wf__pickers[b-7clg71ul88] {
        grid-template-columns: 1fr;
    }

    .anv-wf__facet[b-7clg71ul88] {
        flex-direction: column;
        gap: 4px;
    }

    .anv-wf__facet-label[b-7clg71ul88] {
        flex-basis: auto;
        padding-top: 0;
    }
}
/* /Features/Works/Components/ChangeWorkType.razor.rz.scp.css */
.wts-hierarchy[b-9jctvwmn35] {
    padding: 0.5rem 0.25rem;
    min-width: 190px;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: left;
}

.wts-hierarchy__intro[b-9jctvwmn35] {
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.wts-hierarchy__row[b-9jctvwmn35] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wts-hierarchy__connector[b-9jctvwmn35] {
    opacity: 0.45;
    font-family: monospace;
}

.hw-row__badge[b-9jctvwmn35] {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
}
/* /Features/Works/Components/WorkHistory.razor.rz.scp.css */
.work-history[b-bzdwjtl60d] {
    padding: 0.5rem 0.25rem;
}

.work-history__spinner[b-bzdwjtl60d] {
    display: block;
    margin: 1rem auto;
}

.work-history__empty[b-bzdwjtl60d] {
    color: var(--mud-palette-text-secondary);
    padding: 0.75rem 0.25rem;
}

.work-history__header[b-bzdwjtl60d] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.work-history__list[b-bzdwjtl60d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Timeline: avatar column with a connecting line, message column on the right.
   The item has no vertical padding — the breathing room lives in the body — so the
   connector can span from one avatar to the next without an interrupting gap. */
.work-history__item[b-bzdwjtl60d] {
    --anv-history-avatar: 24px; /* MudAvatar Size.Small; pinned below so the connector lines up */
    --anv-history-link: 2px solid var(--mud-palette-primary); /* chain color/thickness, shared by the avatar ring and the connector */
    display: grid;
    grid-template-columns: var(--anv-history-avatar) 1fr;
    gap: 0.6rem;
    position: relative;
}

/* Stretches to the full item height (grid item), so the connector can anchor to its bottom. */
.work-history__avatar[b-bzdwjtl60d] {
    position: relative;
    z-index: 1;
}

/* Pin the avatar to the column width: the connector is centered on the column and starts at
   --anv-history-avatar, so any drift in MudAvatar's own size would offset it and open a gap. */
.work-history__avatar[b-bzdwjtl60d]  .mud-avatar {
    width: var(--anv-history-avatar);
    height: var(--anv-history-avatar);
}

/* Ring drawn on the wrapper, not on .mud-avatar: AnvPersona renders four different inner shapes
   (uploaded photo, identicon svg, initials, and a pre-load placeholder) and a border on the inner
   element doesn't land the same way on all of them. Overlaying the wrapper rings every entry
   identically, and reuses --anv-history-link so it matches the connector below it. */
.work-history__avatar[b-bzdwjtl60d]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--anv-history-avatar);
    border-radius: 50%;
    border: var(--anv-history-link);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}

/* Connector: avatar bottom → next entry's avatar top. The bottom-most entry (the oldest,
   or the newest when sorted ascending) has nothing below it to connect to. */
.work-history__item:not(:last-child) .work-history__avatar[b-bzdwjtl60d]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--anv-history-avatar);
    bottom: 0;
    transform: translateX(-50%);
    border-left: var(--anv-history-link);
}

.work-history__body[b-bzdwjtl60d] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.25;
}

.work-history__item:last-child .work-history__body[b-bzdwjtl60d] {
    padding-bottom: 0;
}

.work-history__line[b-bzdwjtl60d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
}

.work-history__user[b-bzdwjtl60d] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.work-history__msg[b-bzdwjtl60d] {
    color: var(--mud-palette-text-primary);
}

.work-history__detail[b-bzdwjtl60d] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.work-history__time[b-bzdwjtl60d] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
}
/* /Features/Works/Components/WorkLinks.razor.rz.scp.css */
.work-links[b-tuj05iax7e] {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Filter toggle sits above the sections; small, left-aligned. */
.work-links__filter[b-tuj05iax7e] {
    align-self: flex-start;
    margin-bottom: 0.25rem;
}

.work-links__section[b-tuj05iax7e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.work-links__title[b-tuj05iax7e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.work-links__count[b-tuj05iax7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.work-links__empty[b-tuj05iax7e] {
    color: var(--mud-palette-text-secondary);
    padding: 0.25rem 0;
}

.work-links__spinner[b-tuj05iax7e] {
    margin: 0.5rem 0;
}

/* ── Children list ───────────────────────────────────────────────────────── */
.work-links__children[b-tuj05iax7e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* The child row is a MudLink, so its box styling must be reached through ::deep —
   the <ul> (.work-links__children) carries the component scope. */
.work-links__children[b-tuj05iax7e]  .work-links__child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none;
    transition: border-color 90ms ease, background 90ms ease;
}

.work-links__children[b-tuj05iax7e]  .work-links__child:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.work-links__children[b-tuj05iax7e]  .work-links__child-num {
    font-family: var(--mud-typography-monospace-family, ui-monospace, "Cascadia Code", "SF Mono", monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.work-links__children[b-tuj05iax7e]  .work-links__child-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-links__children[b-tuj05iax7e]  .work-links__child-go {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.work-links__children[b-tuj05iax7e]  .work-links__child:hover .work-links__child-go {
    color: var(--mud-palette-primary);
}

/* ── Other links: list ───────────────────────────────────────────────────── */
.work-links__list[b-tuj05iax7e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.work-links__item[b-tuj05iax7e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

/* The link and icon are MudBlazor child components, so their classes only take effect
   through ::deep — the <li> (.work-links__item) carries the scope. */
.work-links__item[b-tuj05iax7e]  .work-links__item-icon {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.work-links__item[b-tuj05iax7e]  .work-links__item-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /Features/Works/Components/WorkLinksEditor.razor.rz.scp.css */
.work-links-editor[b-xr49cij3kv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.work-links-editor__empty[b-xr49cij3kv] {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    padding: 0.25rem 0;
}

.work-links-editor__spinner[b-xr49cij3kv] {
    margin: 0.5rem 0;
}

/* ── Add row ──────────────────────────────────────────────────────────────── */
.work-links-editor__add[b-xr49cij3kv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.work-links-editor__add-title[b-xr49cij3kv] {
    flex: 1 1 160px;
    min-width: 140px;
}

.work-links-editor__add-url[b-xr49cij3kv] {
    flex: 2 1 240px;
    min-width: 200px;
}

/* ── List ─────────────────────────────────────────────────────────────────── */
.work-links-editor__list[b-xr49cij3kv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.work-links-editor__item[b-xr49cij3kv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

/* The link, icon and delete button are MudBlazor child components, so their classes
   only take effect through ::deep — the <li> (.work-links-editor__item) carries the scope. */
.work-links-editor__item[b-xr49cij3kv]  .work-links-editor__item-icon {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.work-links-editor__item[b-xr49cij3kv]  .work-links-editor__item-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Push the delete button hard to the right edge of the row. */
.work-links-editor__item[b-xr49cij3kv]  .work-links-editor__item-del {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Work item search autocomplete ──────────────────────────────────────────── */
.work-links-editor__add-item[b-xr49cij3kv] {
    margin-bottom: 0.65rem;
}

.work-links-editor__add-item-ac[b-xr49cij3kv] {
    width: 100%;
}

.work-links-editor__ac-item[b-xr49cij3kv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.work-links-editor__ac-num[b-xr49cij3kv] {
    font-family: var(--mud-typography-monospace-family, ui-monospace, "Cascadia Code", "SF Mono", monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.work-links-editor__ac-title[b-xr49cij3kv] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Features/Works/Components/WorkTeamRestrictionSelector.razor.rz.scp.css */
.wtr-field[b-p2dceyih0d] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    min-height: 54px;
}

.wtr-field--error[b-p2dceyih0d] {
    border-color: var(--mud-palette-error);
}

.wtr-field--error .wtr-field__label[b-p2dceyih0d] {
    color: var(--mud-palette-error);
}

.wtr-field__label[b-p2dceyih0d] {
    line-height: 1;
}

.wtr-field__row[b-p2dceyih0d] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.wtr-field__row--secondary[b-p2dceyih0d] {
    opacity: 0.8;
    margin-top: 1px;
}

.wtr-field__icon[b-p2dceyih0d] {
    flex-shrink: 0;
}

.wtr-field__change-action[b-p2dceyih0d] {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wtr-field__change-btn[b-p2dceyih0d] {
    flex-shrink: 0;
    opacity: 0.6;
}

.wtr-field__change-btn:hover[b-p2dceyih0d] {
    opacity: 1;
}

.wtr-field__highlight[b-p2dceyih0d] {
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
}

.wtr-field__error-text[b-p2dceyih0d] {
    margin-top: 2px;
}
/* /Features/Works/Components/WorkTreeRow.razor.rz.scp.css */
.wo-row[b-36wxn5ly5k] {
    --indent: calc(var(--wo-depth, 0) * 1.25rem);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    padding-left: calc(0.5rem + var(--indent));
    border-radius: 0.4rem;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    height: 2.125rem;
    box-sizing: border-box;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.wo-row:hover[b-36wxn5ly5k] {
    background: color-mix(in srgb, var(--mud-palette-action-default) 7%, transparent);
}

.wo-row--locked[b-36wxn5ly5k] {
    cursor: default;
}

.wo-row--selected[b-36wxn5ly5k] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.wo-row--selected:hover[b-36wxn5ly5k] {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

/* "Last touched" marker: the item just created / moved / converted. A steady border keeps it
   findable after the tree rebuilds; the one-shot pulse draws the eye when the row (re)mounts. */
.wo-row--flash[b-36wxn5ly5k] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    animation: wo-flash-b-36wxn5ly5k 1.6s ease-out 1;
}

@keyframes wo-flash-b-36wxn5ly5k {
    0% {
        background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    }

    100% {
        background: transparent;
    }
}

.wo-twist[b-36wxn5ly5k] {
    width: 1.25rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wo-twist-btn[b-36wxn5ly5k] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    display: flex;
}

.wo-check[b-36wxn5ly5k],
.wo-type-icon[b-36wxn5ly5k],
.wo-status-icon[b-36wxn5ly5k] {
    flex: none;
}

.wo-lock[b-36wxn5ly5k] {
    color: var(--mud-palette-text-disabled);
}

.wo-num[b-36wxn5ly5k] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.wo-summary[b-36wxn5ly5k] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-spacer[b-36wxn5ly5k] {
    flex: 1 1 auto;
}

.wo-tags[b-36wxn5ly5k] {
    flex: none;
    display: flex;
    align-items: center;
}

/* Compact the menu's icon button so the 2.125rem row height holds. The button is MudBlazor
   markup, so the rule needs ::deep to reach past the scope boundary. */
.wo-menu[b-36wxn5ly5k] {
    flex: none;
    display: flex;
    align-items: center;
}

.wo-menu[b-36wxn5ly5k]  .mud-button-root {
    padding: 0.15rem;
}
/* /Features/Works/Components/WorkTypeSelector.razor.rz.scp.css */
/* MudChip / MudIcon are components and never carry this component's scope attribute, so every
   rule below reaches them through the plain .wts wrapper with ::deep. Written as bare
   ".wts-chip {...}" these were emitted as ".wts-chip[b-...]" and matched nothing. */
.wts[b-0sld4v97hd] {
    display: inline-flex;
}

.wts[b-0sld4v97hd]  .wts-chip {
    text-transform: none;
}

.wts[b-0sld4v97hd]  .wts-chip__icon {
    color: currentColor;
    margin-right: 0.35rem;
}

.wts-chip__label[b-0sld4v97hd] {
    line-height: 1;
}

/* Editable: signal it's clickable with a pointer and a subtle lift on hover. */
.wts[b-0sld4v97hd]  .wts-chip--editable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.wts[b-0sld4v97hd]  .wts-chip--editable:hover,
.wts[b-0sld4v97hd]  .wts-chip--editable:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    filter: brightness(1.06);
}

/* Read-only: plain display, no interaction affordance. */
.wts[b-0sld4v97hd]  .wts-chip--readonly {
    cursor: default;
}
/* /Features/Works/GanttPage.razor.rz.scp.css */
.gantt-page[b-bvzoonvqgg] {
    /* The chart's neutral. Grey is the one accent with no palette variable behind it, and a single
       value cannot clear 3:1 against both the light and the dark surface, so it is set per theme
       here and reused wherever the chart means "no signal": the Draft accent, and a restriction
       that has stopped holding anyone. */
    --gantt-muted: #757575;
    /* Every "cannot start yet" mark — hourglass, ring, dashed run — is a thin glyph on the chart
       surface, so it answers to the 3:1 non-text rule rather than to the filled-surface tokens.
       Neither raw nor darkened amber clears that in both themes (raw is 2.2:1 on white, darkened
       only 3.1:1 on the dark surface), so it too is set per theme: 5.0:1 and 7.4:1. */
    --gantt-warn: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    height: 100%;
    min-height: 0;
    /* A flex item's default min-width:auto lets this page grow to the chart's max-content width, so
       an ancestor ends up with the horizontal scrollbar. That is fatal here: `position: sticky` only
       pins within its OWN scroll container, so an ancestor scroll carries the pinned label column
       off-screen. Cap the page and the chart must be the only thing that scrolls sideways. */
    min-width: 0;
    max-width: 100%;
}

html[data-dark-mode="true"] .gantt-page[b-bvzoonvqgg] {
    --gantt-muted: #9e9e9e;
    --gantt-warn: var(--mud-palette-warning);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.gantt-header[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.gantt-header__lead[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gantt-badge[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.gantt-subtitle[b-bvzoonvqgg] {
    color: var(--mud-palette-text-secondary);
}

.gantt-header__controls[b-bvzoonvqgg] {
    min-width: 18rem;
}

/* AnvProjectSelector is sized from this wrapper — a class handed to a MudBlazor
   component never matches a scoped selector. */
.gantt-project-picker[b-bvzoonvqgg] {
    min-width: 18rem;
}

/* ── Legend ──────────────────────────────────────────────────────────── */

.gantt-legend[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.gantt-legend__item[b-bvzoonvqgg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gantt-legend__dot[b-bvzoonvqgg] {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--gantt-accent) var(--gantt-fill-mix, 85%), var(--mud-palette-surface));
    border: 1px solid var(--gantt-accent);
}

.gantt-legend__inherited[b-bvzoonvqgg] {
    width: 1.1rem;
    height: 0.55rem;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--mud-palette-info) 40%, var(--mud-palette-surface));
    background-image: repeating-linear-gradient(45deg,
        transparent 0 3px,
        color-mix(in srgb, var(--mud-palette-info) 45%, transparent) 3px 6px);
    border: 1px solid var(--mud-palette-info);
}

.gantt-legend__diamond[b-bvzoonvqgg] {
    width: 0.65rem;
    height: 0.65rem;
    transform: rotate(45deg);
    border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-info) 78%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-info);
}

/* ── Status accents (bars, milestones, legend) ───────────────────────── */

/* Draft is work nobody has committed to yet, so it stays out of the colour system entirely — a plan
   being read for what is actually happening shouldn't have to filter out proposals first. */
.gantt-st--draft[b-bvzoonvqgg] {
    --gantt-accent: var(--gantt-muted);
}

/* Open is a lighter tint of the same hue as In Progress ("ready" vs "moving"). */
.gantt-st--open[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-info);
    --gantt-fill-mix: 40%;
}

.gantt-st--inprogress[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-info);
}

.gantt-st--onhold[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-warning);
}

.gantt-st--done[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-success);
}

.gantt-st--archived[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-secondary);
}

/* ── Chart shell ─────────────────────────────────────────────────────── */

.gantt-scroll[b-bvzoonvqgg] {
    overflow: auto;
    /* Keeps a sideways wheel/trackpad gesture inside the chart instead of chaining to the page. */
    overscroll-behavior-x: contain;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.5rem;
    background: var(--mud-palette-surface);
}

.gantt-table[b-bvzoonvqgg] {
    --gantt-weekend: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    --gantt-label-w: 21rem;
    display: grid;
    grid-template-columns: var(--gantt-label-w) max-content;
    width: max-content;
    min-width: 100%;
}

/* Collapsed: the column keeps every row's icon (and a phase's expander) so the rows stay
   identifiable and aligned, and hands the rest of the width to the timeline. */
.gantt-table--narrow[b-bvzoonvqgg] {
    --gantt-label-w: 4.25rem;
}

.gantt-table--narrow .gantt-label__text[b-bvzoonvqgg],
.gantt-table--narrow .gantt-label__number[b-bvzoonvqgg],
.gantt-table--narrow .gantt-label__count[b-bvzoonvqgg],
.gantt-table--narrow .gantt-label__dur[b-bvzoonvqgg],
.gantt-table--narrow .gantt-label__caption[b-bvzoonvqgg] {
    display: none;
}

.gantt-table--narrow .gantt-label--item[b-bvzoonvqgg] {
    padding-left: 0.5rem;
}

.gantt-rowgroup[b-bvzoonvqgg] {
    display: contents;
}

/* ── Label column (sticky left) ──────────────────────────────────────── */

.gantt-label[b-bvzoonvqgg] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    padding: 0 0.5rem 0 calc(0.5rem + var(--gantt-indent, 0) * 1.1rem);
}

.gantt-label--head[b-bvzoonvqgg] {
    top: 0;
    z-index: 4;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gantt-head-months[b-bvzoonvqgg] {
    height: 1.75rem;
    min-height: 1.75rem;
    border-bottom: none;
    justify-content: flex-end;
    padding: 0 0.15rem 0 0;
}

.gantt-label__caption[b-bvzoonvqgg] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
}

.gantt-label__caption:first-child[b-bvzoonvqgg] {
    flex: 1;
    min-width: 0;
}

/* The header strip is only 1.75rem tall — shrink the button to fit inside it. */
.gantt-head-months[b-bvzoonvqgg]  .mud-icon-button {
    height: 1.4rem;
    width: 1.4rem;
    padding: 0.1rem;
}

.gantt-head-days[b-bvzoonvqgg] {
    top: 1.75rem;
    height: 1.6rem;
    min-height: 1.6rem;
}

.gantt-label--project[b-bvzoonvqgg]  .mud-icon-root {
    flex: none;
}

.gantt-label--project .gantt-label__text[b-bvzoonvqgg] {
    font-weight: 600;
}

.gantt-label--section[b-bvzoonvqgg] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.gantt-label--section .gantt-label__text[b-bvzoonvqgg] {
    font-weight: 600;
}

.gantt-label__link[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.gantt-label__link:hover .gantt-label__text[b-bvzoonvqgg] {
    text-decoration: underline;
}

.gantt-label__link--static[b-bvzoonvqgg] {
    cursor: default;
}

.gantt-label__link[b-bvzoonvqgg]  .mud-icon-root {
    flex: none;
}

.gantt-label__number[b-bvzoonvqgg] {
    flex: none;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.gantt-label__text[b-bvzoonvqgg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}

.gantt-label__count[b-bvzoonvqgg] {
    flex: none;
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent);
    border-radius: 999px;
    padding: 0 0.45rem;
}

/* Fixed width so every duration right-aligns into one readable column. */
.gantt-label__dur[b-bvzoonvqgg] {
    flex: none;
    width: 2.9rem;
    text-align: right;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.gantt-label--project .gantt-label__dur[b-bvzoonvqgg],
.gantt-label--section .gantt-label__dur[b-bvzoonvqgg] {
    font-weight: 600;
}

.gantt-label__dur--none[b-bvzoonvqgg] {
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 65%, transparent);
}

.gantt-toggle[b-bvzoonvqgg] {
    display: flex;
    align-items: center;
    flex: none;
    background: none;
    border: none;
    padding: 0.1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.gantt-toggle:hover[b-bvzoonvqgg] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

/* Holds the chevron's place on a childless row so every label in the column starts on one line. */
.gantt-toggle--empty[b-bvzoonvqgg] {
    /* The chevron button's own box: a Size.Small icon (1.25rem) plus its 0.1rem padding. */
    width: 1.45rem;
    height: 1.45rem;
    pointer-events: none;
}

/* ── Timeline column ─────────────────────────────────────────────────── */

.gantt-tl[b-bvzoonvqgg] {
    position: relative;
    width: var(--gantt-tl-w);
    background-image: var(--gantt-tl-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
}

.gantt-tl--months[b-bvzoonvqgg] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: stretch;
    height: 1.75rem;
    background-color: var(--mud-palette-surface);
    background-image: none;
    border-bottom: none;
}

.gantt-month[b-bvzoonvqgg] {
    flex: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-left: 1px solid var(--mud-palette-lines-default);
}

.gantt-month:first-child[b-bvzoonvqgg] {
    border-left: none;
}

.gantt-tl--days[b-bvzoonvqgg] {
    position: sticky;
    top: 1.75rem;
    z-index: 3;
    display: flex;
    height: 1.6rem;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gantt-day[b-bvzoonvqgg] {
    flex: none;
    width: var(--gantt-day-w);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
}

.gantt-day--today[b-bvzoonvqgg] {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.gantt-tl--row[b-bvzoonvqgg] {
    min-height: 2.1rem;
}

.gantt-tl--section[b-bvzoonvqgg] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

/* Today marker: drawn per row cell so it spans the chart without an overlay element. */
.gantt-table--today .gantt-tl--row[b-bvzoonvqgg]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gantt-today-x);
    width: 2px;
    margin-left: -1px;
    background: color-mix(in srgb, var(--mud-palette-error) 60%, transparent);
    pointer-events: none;
}

/* ── Bars & milestones ───────────────────────────────────────────────── */

.gantt-bar[b-bvzoonvqgg] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1rem;
    border-radius: 0.3rem;
    z-index: 1;
    background: color-mix(in srgb, var(--gantt-accent) var(--gantt-fill-mix, 85%), var(--mud-palette-surface));
    border: 1px solid var(--gantt-accent);
}

.gantt-bar:hover[b-bvzoonvqgg],
.gantt-milestone:hover[b-bvzoonvqgg] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gantt-accent) 35%, transparent);
}

.gantt-bar--startonly[b-bvzoonvqgg] {
    border-style: dashed;
}

/* A subtask has no dates of its own, so it is drawn on its parent task's span. Hatching the fill
   keeps the row on the timeline while saying the window is borrowed rather than set on the item. */
.gantt-bar--inherited[b-bvzoonvqgg] {
    height: 0.75rem;
    background-image: repeating-linear-gradient(45deg,
        transparent 0 3px,
        color-mix(in srgb, var(--gantt-accent) 45%, transparent) 3px 6px);
}

.gantt-bar--section[b-bvzoonvqgg] {
    height: 0.45rem;
    border-radius: 0.25rem;
}

.gantt-bar--project[b-bvzoonvqgg] {
    --gantt-accent: var(--mud-palette-primary);
    height: 0.5rem;
    border-radius: 0.25rem;
}

.gantt-milestone[b-bvzoonvqgg] {
    position: absolute;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: -0.425rem;
    transform: rotate(45deg);
    border-radius: 2px;
    z-index: 1;
    background: color-mix(in srgb, var(--gantt-accent) 78%, var(--mud-palette-surface));
    border: 1px solid var(--gantt-accent);
}

/* ── Dependency restriction ──────────────────────────────────────────── */

/* An item that may not start yet — because of another item, an ancestor, or its own "cannot start
   before start date" switch — keeps its own status colour (the restriction is a separate fact from
   where the work stands) and gains a warning ring instead. Drawn as an outline rather than a fill so
   the status accent underneath stays readable in both themes. */
.gantt-blocked[b-bvzoonvqgg] {
    outline: 2px solid var(--gantt-warn);
    outline-offset: 1px;
}

/* The restriction is set but holding nobody: the item was started anyway, by someone holding
   "works.overridestartlock". The ring and its hourglass mute together — one of them staying amber
   while the other went grey would read as a bug rather than as a distinction. */
.gantt-blocked.gantt-lifted[b-bvzoonvqgg] {
    outline-color: var(--gantt-muted);
}

/* The run from "cleared on this day" to where the bar actually starts. A dashed rule at the bar's
   own vertical centre, so it reads as a continuation of the bar rather than a separate object. */
.gantt-dep[b-bvzoonvqgg] {
    position: absolute;
    top: 50%;
    height: 0;
    border-top: 2px dashed var(--gantt-warn);
    z-index: 1;
    pointer-events: auto;
}

.gantt-dep[b-bvzoonvqgg]::before {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: -0.15rem;
    width: 0.3rem;
    height: 0.6rem;
    border-radius: 1px;
    background: var(--gantt-warn);
}

/* The bar starts before its blockers can clear it: the plan itself is impossible, which is a
   stronger statement than "waiting", so it takes the error colour. */
.gantt-dep--conflict[b-bvzoonvqgg] {
    border-top-color: var(--mud-palette-error);
}

.gantt-dep--conflict[b-bvzoonvqgg]::before {
    background: var(--mud-palette-error);
}

/* The hourglass rides on a MudIcon, whose span carries no CSS-isolation attribute of its own — a
   plain `.gantt-label__blocked` rule would be scoped to nothing and silently do nothing. Reach it
   through ::deep from the label cell, which is ours. The icon is set to Color.Inherit so the colour
   below wins outright instead of fighting MudBlazor's own `mud-*-text` class. */
.gantt-label[b-bvzoonvqgg]  .gantt-label__blocked {
    flex: none;
    font-size: 1rem;
    color: var(--gantt-warn);
}

.gantt-label[b-bvzoonvqgg]  .gantt-label__blocked.gantt-lifted {
    color: var(--gantt-muted);
}

.gantt-legend__blocked[b-bvzoonvqgg] {
    width: 1.1rem;
    height: 0;
    border-top: 2px dashed var(--gantt-warn);
}

/* The ring, at swatch scale. The outline sits outside the box, so it needs its own breathing room
   rather than relying on the legend's gap. */
.gantt-legend__ring[b-bvzoonvqgg] {
    width: 0.55rem;
    height: 0.55rem;
    margin: 0 0.2rem;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
    outline: 2px solid var(--gantt-warn);
    outline-offset: 1px;
}

/* ── Row hover ───────────────────────────────────────────────────────── */

.gantt-rowgroup:hover > .gantt-label--item[b-bvzoonvqgg],
.gantt-rowgroup:hover > .gantt-tl--row[b-bvzoonvqgg] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}
/* /Features/Works/ProjectEditorPage.razor.rz.scp.css */
/* ── Project editor ─────────────────────────────────────────────────────────
   IMPORTANT (CSS isolation) — two distinct traps, both of which had silently
   disabled rules in this file:

   1. A class handed to a MudBlazor component via Class="..." lands on markup
      that component rendered, so it carries none of this file's scope
      attribute. A plainly-scoped selector can never match it — the rule has to
      go through `.project-editor-page ::deep ...`. The page div and the
      loading div are the only plain HTML anchors on this page.

   2. The scoped-CSS rewriter does not handle a nested `::deep` block written
      without a leading `&`. Every rule in this file that did so was missing
      from the generated bundle entirely — outer declarations included — which
      is why `.project-editor-column` computed `display: block` even though the
      source says `flex`. The failure leaves no trace in the source.

   So: keep every selector flat, as below. `& ::deep …` does rewrite correctly
   (see AnvSplitPanel.razor.css), but flat selectors are what this page and
   WorkEditorPage.razor.css use, and they cannot fail this way. */

.project-editor-page[b-9vppr83vc9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    padding: 0.5rem 0 1.5rem;
    /* AnvEditorSection lays its body out as a flex column. This column spaces its fields with the
       controls' own margins (0.5rem, global), so the section adds no gap of its own — keeping the
       collapsible fields exactly as far apart as they were before. Set here (a plain div) because
       custom properties inherit and the MudPaper column carries no CSS-isolation attribute.
       The column's own 1rem gap sits one level up, between the section / divider / comments
       blocks, so it does not disturb this. */
    --anv-editor-section-gap: 0;
}

.project-editor-loading[b-9vppr83vc9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.project-editor-page[b-9vppr83vc9]  .project-editor-actions {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0.9rem 1rem;
    background-color: var(--mud-palette-background);
}

.project-editor-page[b-9vppr83vc9]  .project-editor-form {
    min-height: 0;
    width: 100%;
}

/* No `width: 100%` here: MudGrid already sizes itself `calc(100% + 12px)` against a `-12px` left
   margin so the items' 12px gutter padding lands the content flush with the container edges.
   Overriding the width shifts the whole grid 12px left and leaves the right-hand card ending 12px
   short of the sticky action bar above it. */
.project-editor-page[b-9vppr83vc9]  .project-editor-grid {
    align-items: flex-start;
}

.project-editor-page[b-9vppr83vc9]  .project-editor-grid .mud-grid-item {
    display: flex;
    align-items: flex-start;
}

/* The three columns keep MudPaper's own surface background, so they read as cards in both themes.
   A `background-color: transparent` here (as the work editor's base column has) would apply in
   light mode only — mudblazor-overrides.css pins every .mud-paper to #262626 with !important under
   html[data-dark-mode="true"] — so it would buy nothing but a light/dark divergence. */
.project-editor-page[b-9vppr83vc9]  .project-editor-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    width: 100%;
    min-height: 100%;
}

/* Same micro-caps heading the work editor uses, so the Comments section reads as a section here too.
   Reached through ::deep: the class is passed to a MudText, which carries no isolation attribute. */
.project-editor-page[b-9vppr83vc9]  .project-editor-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.project-editor-page[b-9vppr83vc9]  .project-editor-section-title::before {
    content: "";
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* Middle column: status, assignee, estimate, restriction, tags. Each is a self-contained control
   rather than a labelled input, so they need more air between them than the left-hand form fields
   to stop reading as one block. Expressed as a gap now that the column really is a flex column —
   it replaces an equivalent `> * + *` margin that stood in while `display: flex` was being
   dropped from the bundle. */
.project-editor-page[b-9vppr83vc9]  .project-editor-column--info {
    gap: 1.5rem;
}

.project-reference-section[b-9vppr83vc9] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    padding: 0.75rem 1rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Start-date group: the picker, the "cannot start before" switch and the lock note as one tinted
   unit with a left accent bar, kept visually distinct from the Due Date field below. The accent
   turns to the info color while the status is locked. */
.project-editor-startgroup[b-9vppr83vc9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem 0.7rem;
    border-inline-start: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    transition: border-color 160ms ease, background-color 160ms ease;
}

.project-editor-startgroup--locked[b-9vppr83vc9] {
    border-inline-start-color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.project-editor-startgroup__lock[b-9vppr83vc9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-editor-startgroup__note[b-9vppr83vc9] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-info);
}

/* Split out of the rule above: the lock icon is a MudIcon, and nesting the ::deep would take the
   whole .project-editor-startgroup__note rule down with it. */
.project-editor-page[b-9vppr83vc9]  .project-editor-startgroup__note .mud-icon-root {
    font-size: 1rem;
}

.project-reference-section__legend[b-9vppr83vc9] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 0 0.35rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-reference-section__hint[b-9vppr83vc9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background-color: var(--mud-palette-info-hover);
    border-radius: var(--mud-default-borderradius);
    padding: 0.5rem 0.65rem;
}

.project-editor-page[b-9vppr83vc9]  .project-editor-children {
    padding: 1.35rem;
    width: 100%;
}

.project-children-list[b-9vppr83vc9] {
    display: flex;
    flex-direction: column;
}

.project-child-item[b-9vppr83vc9] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 24px 24px 28px 32px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.15s;
}

.project-child-item:hover[b-9vppr83vc9] {
    background-color: var(--mud-palette-action-default-hover);
}

.project-child-name[b-9vppr83vc9] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    cursor: pointer;
}

.project-child-name:hover[b-9vppr83vc9],
.project-child-name:focus-visible[b-9vppr83vc9] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.project-child-status[b-9vppr83vc9],
.project-child-priority[b-9vppr83vc9],
.project-child-assignee[b-9vppr83vc9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* The "unassigned" placeholder is a MudIcon, hence ::deep. */
.project-editor-page[b-9vppr83vc9]  .project-child-assignee__none {
    color: var(--mud-palette-text-disabled);
}

.project-children-more[b-9vppr83vc9] {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 0.25rem;
}

@media (min-width: 1600px) {
    .project-editor-page[b-9vppr83vc9]  .project-editor-column {
        padding: 1.5rem;
        gap: 1.1rem;
    }

    .project-editor-page[b-9vppr83vc9]  .project-editor-children {
        padding: 1.5rem;
    }
}

@media (max-width: 1919.98px) {
    .project-editor-page[b-9vppr83vc9]  .project-editor-column,
    .project-editor-page[b-9vppr83vc9]  .project-editor-children {
        padding: 1.1rem;
    }
}
/* /Features/Works/ProjectOptionsPage.razor.rz.scp.css */
.project-options-loading[b-ch2x43ggv5] {
    height: 100%;
    min-height: 300px;
    gap: 12px;
}

.project-options-page[b-ch2x43ggv5] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    padding: 16px;
    gap: 16px;
    overflow-y: auto;
}

.project-options-header[b-ch2x43ggv5] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.project-options-grid[b-ch2x43ggv5] {
    align-content: start;
}

.options-card[b-ch2x43ggv5] {
    padding: 24px;
    height: 100%;
}

.danger-zone-card[b-ch2x43ggv5] {
    border: 2px solid var(--mud-palette-error);
    border-radius: var(--mud-default-borderradius);
}

.clone-mode-option[b-ch2x43ggv5] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px 12px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background-color 0.2s;
}

.clone-mode-option--selected[b-ch2x43ggv5] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.project-options-success[b-ch2x43ggv5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

.clone-success-card[b-ch2x43ggv5] {
    max-width: 520px;
    width: 100%;
    padding: 48px 40px;
    text-align: center;
    border-radius: var(--mud-default-borderradius);
}

.clone-success-icon[b-ch2x43ggv5] {
    margin-bottom: 20px;
    animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.spin-icon[b-ch2x43ggv5] {
    animation: spinSlow 1.4s linear infinite;
}

@@keyframes successPop {
    0%[b-ch2x43ggv5] { transform: scale(0.5); opacity: 0; }
    100%[b-ch2x43ggv5] { transform: scale(1); opacity: 1; }
}

@@keyframes spinSlow {
    from[b-ch2x43ggv5] { transform: rotate(0deg); }
    to[b-ch2x43ggv5] { transform: rotate(360deg); }
}
/* /Features/Works/ProjectOrganizerPage.razor.rz.scp.css */
/* Mirrors WorkOrganizerPage.razor.css (the admin organizer) with a project-scoped header:
   the selected project's icon + name as the title, and a project picker in the tools row. */

.po-loading[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

.po-page[b-dsdy8irypd] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
}

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

.po-header[b-dsdy8irypd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.po-eyebrow[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.po-title[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.15rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

/* The icon/picker/search/dest classes sit on MudBlazor components, whose markup doesn't carry this
   page's CSS scope — reach them via ::deep from a scoped ancestor or the rules silently die. */
.po-title[b-dsdy8irypd]  .po-title__icon {
    flex: none;
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
}

.po-title__name[b-dsdy8irypd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-hint[b-dsdy8irypd] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    max-width: 56ch;
}

.po-header__tools[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.po-header__tools[b-dsdy8irypd]  .po-project-picker {
    min-width: 15rem;
}

.po-header__tools[b-dsdy8irypd]  .po-search {
    min-width: 16rem;
}

/* ── body: tree + move log ──────────────────────────────────────────────── */

.po-body[b-dsdy8irypd] {
    display: grid;
    grid-template-columns: 1fr 21rem;
    min-height: 0;
    overflow: hidden;
}

.po-tree[b-dsdy8irypd] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
}

.po-scroll[b-dsdy8irypd] {
    overflow: auto;
    min-height: 0;
    padding: 0.5rem 1rem 2rem;
}

.po-empty[b-dsdy8irypd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    grid-row: 1 / -1;
    height: 100%;
    text-align: center;
}

.po-actionbar[b-dsdy8irypd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.5rem 1rem 0.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 0.5rem;
    background: var(--mud-palette-surface);
}

.po-actionbar__hint[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.po-actionbar__info[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.po-actionbar__controls[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.po-actionbar__label[b-dsdy8irypd] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.po-actionbar__or[b-dsdy8irypd] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-disabled);
}

.po-actionbar__warn[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--mud-palette-warning-text, var(--mud-palette-text-secondary));
}

.po-actionbar__controls[b-dsdy8irypd]  .po-dest {
    min-width: 17rem;
}

/* ── move log rail ──────────────────────────────────────────────────────── */

.po-log[b-dsdy8irypd] {
    border-left: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.po-log__head[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.po-log__empty[b-dsdy8irypd] {
    padding: 1.25rem 1rem;
}

.po-log__list[b-dsdy8irypd] {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    overflow: auto;
}

.po-log__item[b-dsdy8irypd] {
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
}

.po-log__item + .po-log__item[b-dsdy8irypd] {
    margin-top: 0.15rem;
}

.po-log__item--undone[b-dsdy8irypd] {
    opacity: 0.6;
}

.po-log__line[b-dsdy8irypd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.po-log__label[b-dsdy8irypd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-log__time[b-dsdy8irypd] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.po-log__path[b-dsdy8irypd] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.2rem;
}

.po-log__from[b-dsdy8irypd],
.po-log__to[b-dsdy8irypd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7.5rem;
}

.po-log__to[b-dsdy8irypd] {
    color: var(--mud-palette-text-primary);
}

.po-log__path[b-dsdy8irypd]  .po-log__arrow {
    flex: none;
}

.po-log__actions[b-dsdy8irypd] {
    margin-top: 0.2rem;
}

@media (max-width: 960px) {
    .po-body[b-dsdy8irypd] {
        grid-template-columns: 1fr;
    }

    .po-log[b-dsdy8irypd] {
        display: none;
    }
}
/* /Features/Works/ProjectsPage.razor.rz.scp.css */
/* ── Filters ─────────────────────────────────────────────── */
.projects-page__search[b-dh0suiyh72] {
    flex: 1 1 180px;
    /*min-width: 240px;*/
    max-width: 100%;
    align-self: center;
    margin-right: 2rem;
}

    .projects-page__search[b-dh0suiyh72]  .mud-input {
        margin-bottom: 0;
        height: 36px;
    }

.projects-page__search[b-dh0suiyh72]  .mud-input-control {
    height: 36px;
}

/* ── Page layout ─────────────────────────────────────────── */
.projects-page[b-dh0suiyh72] {
    width: 100%;
    /* Span the full container width (like the other lists), leaving a little
       breathing room on the right so content doesn't touch the edge. */
    padding-right: 1rem;
}

/* ── Listed-count line ───────────────────────────────────── */
.projects-page__count[b-dh0suiyh72] {
    padding: 0 2px;
}

/* ── View toggle (tiles / grid) ──────────────────────────── */
.projects-page__view-toggle[b-dh0suiyh72] {
    flex-shrink: 0;
}

/* ── Recent projects strip ───────────────────────────────── */
.recent-projects[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recent-projects__heading[b-dh0suiyh72] {
    padding-left: 2px;
}

.recent-projects__strip[b-dh0suiyh72] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.recent-chip[b-dh0suiyh72] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    max-width: 15rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.recent-chip:hover[b-dh0suiyh72] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.recent-chip--active[b-dh0suiyh72] {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
}

.recent-chip__icon[b-dh0suiyh72] {
    flex-shrink: 0;
}

.recent-chip__body[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.recent-chip__name[b-dh0suiyh72] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-chip__number[b-dh0suiyh72] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.recent-chip__status[b-dh0suiyh72] {
    display: flex;
    align-items: center;
    margin-top: 0.15rem;
}

.recent-chip__active-icon[b-dh0suiyh72] {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Grid (table) view ───────────────────────────────────── */
.projects-page__table[b-dh0suiyh72] {
    width: 100%;
    max-height: calc(100dvh - 260px);
    overflow-y: auto;
}

.projects-grid__name[b-dh0suiyh72] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.projects-grid__description[b-dh0suiyh72] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-width: 24rem;
}

.projects-grid__assignee-name[b-dh0suiyh72] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-grid__no-value[b-dh0suiyh72] {
    font-style: italic;
    opacity: 0.5;
}

.projects-grid[b-dh0suiyh72]  .projects-grid__actions-cell {
    text-align: right;
    white-space: nowrap;
}

.projects-grid[b-dh0suiyh72]  .projects-grid__items-cell {
    text-align: right;
    white-space: nowrap;
}

.projects-page__grid[b-dh0suiyh72] {
    width: 100%;
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
    padding-right: 1rem;
}

/* ── Card shell ─────────────────────────────────────────── */
.project-card[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
}

.project-card:hover[b-dh0suiyh72] {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--mud-palette-lines-inputs);
}

/* ── Active card ─────────────────────────────────────────── */
.project-card--active[b-dh0suiyh72] {
    border: 2.5px solid var(--mud-palette-primary);
}

/* Subtle tinted background via a pseudo-element so we can control opacity
   without needing rgba() with a CSS variable */
.project-card--active[b-dh0suiyh72]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--mud-palette-primary);
    opacity: 0.05;
    border-radius: inherit;
    pointer-events: none;
}

.project-card--active:hover[b-dh0suiyh72] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ── Header ──────────────────────────────────────────────── */
.project-card__header[b-dh0suiyh72] {
    padding: 16px 16px 12px;
}

.project-card__title[b-dh0suiyh72] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Body ────────────────────────────────────────────────── */
.project-card__body[b-dh0suiyh72] {
    padding: 0 16px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-card__description[b-dh0suiyh72] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    flex: 1;
}

.project-card__no-description[b-dh0suiyh72] {
    font-style: italic;
    opacity: 0.45;
}

.project-card__status[b-dh0suiyh72] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Footer ──────────────────────────────────────────────── */
.project-card__footer[b-dh0suiyh72] {
    padding: 10px 12px 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    border-radius: 0 0 10px 10px;
}

.project-card__no-date[b-dh0suiyh72] {
    opacity: 0.4;
    font-style: italic;
}

.project-card__item-count[b-dh0suiyh72] {
    padding-left: 0.5rem;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* ── "Add new project" card ──────────────────────────────── */
.project-card--new[b-dh0suiyh72] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 160px;
    border: 2px dashed var(--mud-palette-lines-inputs);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    padding: 24px 16px;
    transition: border-color 0.18s ease, color 0.18s ease;
    color: var(--mud-palette-text-secondary);
}

.project-card--new:hover[b-dh0suiyh72] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.project-card--new[b-dh0suiyh72]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--mud-palette-primary);
    opacity: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.project-card--new:hover[b-dh0suiyh72]::before {
    opacity: 0.05;
}

.project-card--new:hover .project-card--new__icon .mud-icon-root[b-dh0suiyh72] {
    color: var(--mud-palette-primary);
}

.project-card--new__icon[b-dh0suiyh72] {
    opacity: 0.5;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.project-card--new:hover .project-card--new__icon[b-dh0suiyh72] {
    opacity: 1;
    transform: scale(1.1);
}

/* ── Welcome / empty state ───────────────────────────────── */
.projects-welcome[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 40rem;
    margin: 1.5rem auto 0;
}

.projects-welcome__icon-wrap[b-dh0suiyh72] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    margin-bottom: 0.25rem;
}

.projects-welcome__title[b-dh0suiyh72] {
    font-weight: 700;
}

/* ── Hierarchy box ───────────────────────────────────────── */
.projects-welcome__hierarchy[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.hw-row[b-dh0suiyh72] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.hw-row--l1[b-dh0suiyh72] { padding-left: 1.25rem; }
.hw-row--l2[b-dh0suiyh72] { padding-left: 2.75rem; }
.hw-row--l3[b-dh0suiyh72] { padding-left: 4.25rem; }

.hw-row__connector[b-dh0suiyh72] {
    font-family: monospace;
    opacity: 0.4;
    font-size: 0.85rem;
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
}

.hw-row__icon[b-dh0suiyh72] {
    flex-shrink: 0;
    margin-top: 1px;
}

.hw-row__content[b-dh0suiyh72] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hw-row__name[b-dh0suiyh72] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hw-row__desc[b-dh0suiyh72] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.hw-row__badge[b-dh0suiyh72] {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
}

/* ── Tip box ─────────────────────────────────────────────── */
.projects-welcome__tip[b-dh0suiyh72] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

/* ── CTA ─────────────────────────────────────────────────── */
.projects-welcome__cta[b-dh0suiyh72] {
    min-width: 280px;
}
/* /Features/Works/WorkBoard.razor.rz.scp.css */
/* ── WorkBoard ─────────────────────────────────────────────────────────────
   A refined, theme-aware Kanban / list dashboard. All colors derive from the
   MudBlazor palette so light & dark modes are covered without hardcoding.     */

.wb-root[b-ac3u33l4te] {
    width: 100%;
    height: calc(100dvh - 8.25rem);
    min-height: 32rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--mud-palette-text-primary);
}

/* ── Attention summary ────────────────────────────────────────────────────
   Slim count strip under the toolbar: overdue / due today / starting soon.
   Rendered only when at least one count is non-zero.                        */
.wb-summary[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: -0.4rem;
}

.wb-summary__item[b-ac3u33l4te] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.wb-summary__item .mud-icon-root[b-ac3u33l4te] {
    font-size: 0.95rem;
}

/* Tinted status chips: the foreground is the semantic colour darkened toward
   text-primary so it reads on the light tint in light mode and lightens on the
   dark tint in dark mode. (Using the *-text contrast colour here rendered as
   near-white text on a pale tint in light mode — failed WCAG contrast.) */
.wb-summary__item--overdue[b-ac3u33l4te] {
    color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

.wb-summary__item--today[b-ac3u33l4te] {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
}

.wb-summary__item--upcoming[b-ac3u33l4te] {
    color: color-mix(in srgb, var(--mud-palette-info) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-info) 18%, transparent);
}

/* "Showing the first N items" — neutral, not an alert: the board is capped by design, and the
   remedy (pick a project) is in the tooltip. */
.wb-summary__item--capped[b-ac3u33l4te] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────*/
.wb-toolbar[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wb-toolbar__title[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wb-toolbar__heading[b-ac3u33l4te] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wb-toolbar__name[b-ac3u33l4te] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-toolbar__sub[b-ac3u33l4te] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wb-toolbar__actions[b-ac3u33l4te] {
    /* Shared control height so fields, toggles, the sort button and the icon buttons
       all line up on one baseline instead of stair-stepping. */
    --wb-ctl-h: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* A cluster of related controls (filters / sort / view) with tight internal spacing;
   the wider gap + dividers separate the clusters from each other. */
.wb-actions__group[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Toggles match the shared height. Set the height on the GROUP (border-box, so its own
   border is included) and let items fill it — forcing the height on the item instead lets
   the group's border add ~2px on top, making the toggles taller than the buttons/fields.
   Anchored on the wrapper div (which carries the scoped-CSS attribute) because the Class on
   MudToggleGroup's root does not, so a `.wb-scope-toggle ::deep` selector would never match. */
.wb-toolbar__actions[b-ac3u33l4te]  .mud-toggle-group {
    height: var(--wb-ctl-h);
}

.wb-toolbar__actions[b-ac3u33l4te]  .mud-toggle-item {
    height: 100%;
}

/* Toolbar icon buttons (sort direction, refresh): give them the same bordered chrome
   and height as the toggles/fields so they read as part of the row, not bare glyphs. */
.wb-toolbar__actions[b-ac3u33l4te]  .mud-icon-button {
    height: var(--wb-ctl-h);
    width: var(--wb-ctl-h);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.6rem;
}

/* ...but a field's own adornment and clear buttons are .mud-icon-button too, and they sit
   INSIDE the input box, where that chrome draws a second border boxing the icon in. They
   keep MudBlazor's bare-glyph sizing instead. */
.wb-toolbar__actions[b-ac3u33l4te]  .mud-input .mud-icon-button {
    height: auto;
    width: auto;
    border: none;
    border-radius: 50%;
}

/* Sort menu activator button matches the shared height and sits flush with its
   direction toggle so the pair reads as a single "sort" control. The time-range menu
   is the same kind of control, so it shares both rules. */
.wb-sort-group[b-ac3u33l4te],
.wb-window-group[b-ac3u33l4te] {
    gap: 0.3rem;
}

.wb-sort-group[b-ac3u33l4te]  .mud-button-root,
.wb-window-group[b-ac3u33l4te]  .mud-button-root {
    height: var(--wb-ctl-h);
}

/* MudBlazor wraps dense inputs in asymmetric label/helper-text margins
   (.mud-input-control-margin-dense: margin-top 8px, margin-bottom 4px), which makes the
   field box taller than the input and rides these label-only toolbar fields ~4px above the
   toggles/buttons. No helper text is shown here, so zero both margins — the box collapses to
   the input height and the flex row centers it with everything else. !important is required
   because MudBlazor pins the bottom gutter with `.mud-input-control.mud-select { margin-bottom:
   0.5rem !important }` — an ordinary override can't beat it. */
.wb-toolbar__actions[b-ac3u33l4te]  .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Width constraint for the AnvSelectUser board picker; the field's own chrome (avatar,
   dense sizing via Small="true") comes from the component. */
.wb-user-picker[b-ac3u33l4te] {
    min-width: 13rem;
    max-width: 16rem;
}

.wb-tb-divider[b-ac3u33l4te] {
    margin: 0 0.25rem;
    height: 1.5rem;
    align-self: center;
}

.wb-view-toggle[b-ac3u33l4te] {
    border-radius: 0.6rem;
}

.wb-scope-toggle[b-ac3u33l4te] {
    border-radius: 0.6rem;
}

.wb-scope-toggle[b-ac3u33l4te]  .mud-toggle-item {
    text-transform: none;
    font-weight: 600;
}

/* Project filter: capped width so a long project name ellipsizes in the field rather than
   stretching the toolbar; the full name is available via the field's hover tooltip. */
.wb-project-picker[b-ac3u33l4te] {
    min-width: 13rem;
    max-width: 25rem;
}

/* Ellipsize the selected value shown in the closed input. Anchored on the wrapper div (which carries
   the scope attribute) — a class handed to the selector component lands on a child root, which a
   plainly scoped selector never matches (ADR-0019). */
.wb-project-picker[b-ac3u33l4te]  input {
    text-overflow: ellipsis;
}

.wb-sort-btn[b-ac3u33l4te] {
    text-transform: none;
}

/* Numeric label ("7 / 14"): tabular figures stop the button twitching as the values change. */
.wb-window-btn[b-ac3u33l4te] {
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.wb-sort-btn__label[b-ac3u33l4te] {
    font-weight: 600;
}

.wb-sort-btn__dir[b-ac3u33l4te] {
    margin-left: 0.15rem;
}

.wb-menu-head[b-ac3u33l4te] {
    padding: 0.25rem 1rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

/* ── States ───────────────────────────────────────────────────────────────*/
.wb-loading[b-ac3u33l4te] {
    flex: 1;
    display: grid;
    place-items: center;
}

.wb-empty[b-ac3u33l4te] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem;
}

.wb-empty__glyph[b-ac3u33l4te] {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.wb-empty__glyph .mud-icon-root[b-ac3u33l4te] {
    font-size: 2.25rem;
}

.wb-empty__title[b-ac3u33l4te] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.wb-empty__text[b-ac3u33l4te] {
    margin: 0;
    max-width: 22rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.86rem;
}

/* ── Board ────────────────────────────────────────────────────────────────
   ONE scroll for the whole board (not per-column): .wb-board-host is the single
   scroll container; the flex row of columns grows with the tallest column and the
   host scrolls. align-items:stretch + min-height:100% keep the columns equal-height
   and filling the viewport when short. Column headers stay pinned (sticky) because
   the columns are NOT their own scroll containers.
   .wb-drop is the MudDropContainer's rendered root, reached via ::deep because
   scoped-CSS attributes are not applied to child components.                       */
.wb-board-host[b-ac3u33l4te] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.wb-board-host[b-ac3u33l4te]  .wb-drop {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 100%;
    padding-bottom: 0.25rem;
}

/* dragging feedback (ItemDraggingClass, applied by MudDropContainer to the dragged card).
   Blazor applies the class synchronously inside the dragstart dispatch, so it is already on
   the element when Chrome snapshots the native drag image. The tilt must live on the INNER
   wrapper: Chromium ignores a transform on the dragged element itself when painting the drag
   ghost, but transforms on descendants are part of the painted content — this way both the
   ghost under the cursor and the in-place card lean. */
.wb-board-host[b-ac3u33l4te]  .wb-dragging {
    opacity: 0.9;
    cursor: grabbing;
}

.wb-board-host[b-ac3u33l4te]  .wb-dragging .wb-cardwrap {
    transform: rotate(2.5deg) scale(1.02);
    box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent);
}

.wb-col[b-ac3u33l4te] {
    flex: 1 1 0;
    min-width: 15.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--wb-accent) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--wb-accent) 22%, var(--mud-palette-lines-default));
}

.wb-col__head[b-ac3u33l4te] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-weight: 600;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wb-accent) 18%, transparent);
    /* opaque so scrolling cards don't bleed through the pinned header */
    background: color-mix(in srgb, var(--wb-accent) 14%, var(--mud-palette-surface));
}

.wb-col__icon[b-ac3u33l4te] {
    color: var(--wb-accent);
}

.wb-col__title[b-ac3u33l4te] {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-col__count[b-ac3u33l4te] {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.5rem;
    border-radius: 1rem;
    color: var(--wb-accent);
    background: color-mix(in srgb, var(--wb-accent) 18%, var(--mud-palette-surface));
}

.wb-col__hint[b-ac3u33l4te] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.wb-col__collapse[b-ac3u33l4te] {
    flex: none;
    color: var(--wb-accent);
}

/* ── Collapsed column (Draft / Archived) ──────────────────────────────────
   The lane folds to a narrow rail: the whole rail is the button that reopens it,
   holding the status icon, the item count and the title turned a quarter-turn.  */
.wb-col--collapsed[b-ac3u33l4te] {
    flex: 0 0 3.25rem;
    min-width: 3.25rem;
}

.wb-col__head--collapsed[b-ac3u33l4te] {
    flex: 1;
    /* full-height rail, so nothing to pin */
    position: static;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem 0.3rem;
    /* strip the UA button chrome — <button> is used for the free keyboard/focus behaviour */
    border: none;
    border-radius: 1rem;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.wb-col__head--collapsed:hover[b-ac3u33l4te] {
    background: color-mix(in srgb, var(--wb-accent) 24%, var(--mud-palette-surface));
}

/* Turned a quarter-turn and flipped, so it reads bottom-to-top; ellipsized against the rail's
   height. The rotation is visual only — the flex box keeps its vertical-rl size. */
.wb-col__title--vert[b-ac3u33l4te] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    flex: 0 1 auto;
    min-height: 0;
}

/* Expand affordance, pinned to the far end of the rail. */
.wb-col__chevron[b-ac3u33l4te] {
    flex: none;
    margin-top: auto;
    color: var(--mud-palette-text-secondary);
}

/* Column direction so the "Show more" button stacks under the drop zone; the zone still stretches to
   the column's full width (flex cross-axis default) and grows to fill the leftover height. */
.wb-col__body[b-ac3u33l4te] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Reveals the next page of cards in this lane. Sits inside the column, below the zone. */
.wb-col__more[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0 0.6rem 0.6rem;
    padding: 0.35rem 0.6rem;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--wb-accent) 35%, var(--mud-palette-lines-default));
    border-radius: 0.6rem;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.wb-col__more:hover[b-ac3u33l4te] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
}

.wb-col__more .mud-icon-root[b-ac3u33l4te] {
    font-size: 1rem;
}

/* The zone is a MudDropZone component, so its class lands on a child root — reach it with ::deep. */
.wb-col[b-ac3u33l4te]  .wb-col__zone {
    flex: 1;
    /* keeps the zone at column width when a card carries long nowrap content (e.g. a subtask frame's
       parent summary), so the text ellipsizes instead of widening the lane */
    min-width: 0;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.6rem;
    border-radius: 0.6rem;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* valid drop target while dragging — solid tint + inset ring, never a dashed border */
.wb-col[b-ac3u33l4te]  .wb-col__zone--can-drop {
    background: color-mix(in srgb, var(--wb-accent) 14%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wb-accent) 50%, transparent);
}

/* invalid drop target while dragging — dim it and show it's not droppable */
.wb-col[b-ac3u33l4te]  .wb-col__zone--no-drop {
    opacity: 0.4;
    cursor: not-allowed;
}

.wb-col__empty[b-ac3u33l4te] {
    position: absolute;
    inset: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, transparent);
    border: 1px dashed color-mix(in srgb, var(--wb-accent) 30%, var(--mud-palette-lines-default));
    border-radius: 0.6rem;
    pointer-events: none;
}

/* ── Subtask parent frame ─────────────────────────────────────────────────
   A subtask card sits inside a frame headed by its parent task. When the parent
   is not assigned to the board's user, the frame turns dashed and the header is
   muted/italic — context, not one of the user's own items.                    */
.wb-frame[b-ac3u33l4te] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.35rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.wb-frame__parent[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.05rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.wb-frame__parent:hover .wb-frame__num[b-ac3u33l4te] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.wb-frame__parent .mud-icon-root[b-ac3u33l4te] {
    font-size: 0.95rem;
    flex: none;
}

.wb-frame__num[b-ac3u33l4te] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.wb-frame__summary[b-ac3u33l4te] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.wb-frame__foreign-icon[b-ac3u33l4te] {
    flex: none;
}

.wb-frame--foreign[b-ac3u33l4te] {
    border-style: dashed;
    background: var(--mud-palette-surface);
}

.wb-frame--foreign .wb-frame__parent[b-ac3u33l4te] {
    opacity: 0.65;
    font-style: italic;
}

/* ── Card ─────────────────────────────────────────────────────────────────*/
.wb-card[b-ac3u33l4te] {
    position: relative;
    display: flex;
    border-radius: 0.75rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    cursor: grab;
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.wb-card:hover[b-ac3u33l4te] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
}

.wb-card__accent[b-ac3u33l4te] {
    width: 4px;
    flex: none;
    background: var(--wb-prio, var(--mud-palette-lines-default));
}

.wb-card__body[b-ac3u33l4te] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
}

.wb-card__top[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mud-palette-text-secondary);
}

.wb-card__type[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wb-card__type .mud-icon-root[b-ac3u33l4te] {
    font-size: 1rem;
}

/* the task number is the ONLY click-to-open surface on a card (the rest is for dragging) */
a.wb-card__num[b-ac3u33l4te] {
    color: inherit;
    text-decoration: none;
}

a.wb-card__num:hover[b-ac3u33l4te] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.wb-card__spacer[b-ac3u33l4te] {
    flex: 1;
}

.wb-card__menu[b-ac3u33l4te] {
    display: inline-flex;
}

.wb-card__title[b-ac3u33l4te] {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wb-card__foot[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}

/* Bottom date row: start chip pinned left, due chip pinned right. */
.wb-card__dates[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

.wb-card__dates .wb-due[b-ac3u33l4te] {
    margin-left: auto;
}

/* priority accent bar + list-row left tint share the same mapping */
.wb-row--blocker[b-ac3u33l4te] {
    --wb-prio: var(--mud-palette-error);
}

.wb-row--high[b-ac3u33l4te] {
    --wb-prio: var(--mud-palette-warning);
}

.wb-row--normal[b-ac3u33l4te] {
    --wb-prio: var(--mud-palette-lines-default);
}

.wb-row--low[b-ac3u33l4te] {
    --wb-prio: var(--mud-palette-info);
}

/* ── Status pill (differentiates In Progress/On Hold within their column) ───*/
.wb-status[b-ac3u33l4te] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
    color: color-mix(in srgb, var(--wb-s) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--wb-s) 15%, transparent);
}

.wb-status .mud-icon-root[b-ac3u33l4te] {
    font-size: 0.9rem;
}

/* ── Due-date pill ────────────────────────────────────────────────────────*/
.wb-due[b-ac3u33l4te] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    white-space: nowrap;
}

.wb-due .mud-icon-root[b-ac3u33l4te] {
    font-size: 0.9rem;
}

.wb-due--today[b-ac3u33l4te] {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
}

.wb-due--over[b-ac3u33l4te] {
    color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

/* "Starts {date}" chip on not-yet-started items — info-tinted so it reads as
   scheduled/upcoming rather than as a deadline. */
.wb-start[b-ac3u33l4te] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    color: color-mix(in srgb, var(--mud-palette-info) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    white-space: nowrap;
}

.wb-start .mud-icon-root[b-ac3u33l4te] {
    font-size: 0.9rem;
}

/* ── List view ────────────────────────────────────────────────────────────
   The wrapper owns the leftover height: the rows scroll, the pager stays put beneath them. */
.wb-listwrap[b-ac3u33l4te] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wb-list[b-ac3u33l4te] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.9rem;
    background: var(--mud-palette-surface);
}

.wb-list__head[b-ac3u33l4te],
.wb-list__row[b-ac3u33l4te] {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) 4.5rem 8rem 2.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem;
}

.wb-list__head[b-ac3u33l4te] {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.wb-list__row[b-ac3u33l4te] {
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--wb-prio, transparent);
    transition: background-color 100ms ease;
}

.wb-list__row:last-child[b-ac3u33l4te] {
    border-bottom: none;
}

.wb-list__row:hover[b-ac3u33l4te] {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.wb-list__c-item[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.wb-list__type[b-ac3u33l4te] {
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.wb-list__num[b-ac3u33l4te] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.wb-list__summary[b-ac3u33l4te] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-status-chip[b-ac3u33l4te] {
    margin: 0;
}

.wb-list__c-prio[b-ac3u33l4te],
.wb-list__c-act[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-list__c-due[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.wb-list__pager[b-ac3u33l4te] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wb-list__pager-info[b-ac3u33l4te] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width: 960px) {
    .wb-root[b-ac3u33l4te] {
        height: calc(100dvh - 7rem);
    }

    /* One near-full-width column at a time, swiped horizontally. */
    .wb-col[b-ac3u33l4te] {
        flex: 0 0 85vw;
        min-width: 85vw;
    }

    /* ...but a collapsed lane stays a rail — that's the point of collapsing it. */
    .wb-col--collapsed[b-ac3u33l4te] {
        flex: 0 0 3.25rem;
        min-width: 3.25rem;
    }

    .wb-list__head[b-ac3u33l4te] {
        display: none;
    }

    .wb-list__row[b-ac3u33l4te] {
        grid-template-columns: 8rem minmax(0, 1fr) 2.5rem;
        grid-auto-rows: auto;
    }

    .wb-list__c-prio[b-ac3u33l4te],
    .wb-list__c-due[b-ac3u33l4te] {
        display: none;
    }
}
/* /Features/Works/WorkEditorPage.razor.rz.scp.css */
/* ── Work editor — "calm workspace" restyle ─────────────────────────────────
   Compact, consistent type throughout; the side columns are distinct cards;
   helper texts stay visible (no layout shift, page is self-explanatory) but
   are styled small and dim, tucked under their field so they can't be read
   as the next field's label.

   IMPORTANT (CSS isolation): classes passed to MudBlazor components via
   Class="..." do NOT receive the Blazor scope attribute, so plain scoped
   selectors never match them. Every rule that targets a component-rendered
   element must therefore go through `.work-editor-page ::deep ...` (the page
   div and the loading div are the only plain HTML anchors). Selectors are
   kept flat — the scoped-CSS rewriter does not reliably process `::deep`
   inside nested rules. */

.work-editor-page[b-gwf1n730ou] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 0 0 1.5rem;
}

.work-editor-loading[b-gwf1n730ou] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Sticky action bar: translucent + blurred so content scrolling beneath it
   stays perceptible, with a hairline edge instead of a hard block.

   `top` clears the fixed app bar. MudMainContent is the scroll container and
   its box starts at the top of the viewport, *behind* the bar — with `top: 0`
   the title row parks underneath it and gets clipped. --anv-sticky-top is the
   offset that lands it flush below the bar (mudblazor-overrides.css). */
.work-editor-page[b-gwf1n730ou]  .work-editor-actions {
    position: sticky;
    top: var(--anv-sticky-top, 32px);
    z-index: 20;
    padding: 0.7rem 1.25rem;
    background-color: color-mix(in srgb, var(--mud-palette-background) 84%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-form {
    min-height: 0;
    width: 100%;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-grid {
    width: 100%;
    align-items: flex-start;
}

/* ── Read-only view: make the whole form obviously non-editable ──────────────
   When the user can't edit, every input becomes a static label — no borders,
   no focus rings, no carets, no clickable adornments — so the page reads as
   view-only instead of a form that merely refuses keystrokes. Links, buttons
   and menus (Related work, Details chips, metadata) stay fully interactive
   because they are not .mud-input-control elements. */

/* No pointer interaction on field controls: kills click-to-focus, the caret,
   and opening of selects / date pickers. */
.work-editor-page[b-gwf1n730ou]  .work-editor-form--readonly .mud-input-control {
    pointer-events: none;
}

/* Drop the outlined box so each field reads as text sitting under its label.
   The transition is cleared too: a live CSS transition outranks author
   !important in the cascade, so without this the border color never settles. */
.work-editor-page[b-gwf1n730ou]  .work-editor-form--readonly .mud-input-outlined-border {
    border-color: transparent !important;
    transition: none !important;
}

/* Remove the caret and the text cursor that imply an editable field. */
.work-editor-page[b-gwf1n730ou]  .work-editor-form--readonly .mud-input input,
.work-editor-page[b-gwf1n730ou]  .work-editor-form--readonly .mud-input textarea {
    caret-color: transparent;
    cursor: default;
}

/* Hide trailing action adornments (clear "x", select arrow, date toggle) that
   would otherwise look clickable in a static, read-only field. */
.work-editor-page[b-gwf1n730ou]  .work-editor-form--readonly .mud-input-adornment-end {
    display: none;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-grid .mud-grid-item {
    display: flex;
    align-items: flex-start;
}

/* Staggered entrance: the three columns slide up in sequence on load. */
@keyframes work-editor-rise-b-gwf1n730ou {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.work-editor-page[b-gwf1n730ou]  .work-editor-grid .mud-grid-item {
    animation: work-editor-rise-b-gwf1n730ou 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-grid .mud-grid-item:nth-child(2) {
    animation-delay: 0.07s;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-grid .mud-grid-item:nth-child(3) {
    animation-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
    .work-editor-page[b-gwf1n730ou]  .work-editor-grid .mud-grid-item {
        animation: none;
    }
}

.work-editor-page[b-gwf1n730ou]  .work-editor-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    width: 100%;
    min-height: 100%;
    background-color: transparent;
}

/* Input typography and helper-text hierarchy are GLOBAL concerns — see
   wwwroot/css/mudblazor-overrides.css ("Helper Text - Global Field
   Hierarchy"). Do not restyle them per page. */

/* Fields-only column: every child is an input control, so vertical rhythm
   must come from ONE consistent source. Each control already carries a
   0.5rem bottom margin (global), so the flex gap adds only 0.25rem —
   yielding the same 12px between every field pair, including the
   Customer Group / Customer pair that AnvSelectCustomers stacks internally
   with its own 4px gap on top of the control margin. */
.work-editor-page[b-gwf1n730ou]  .work-editor-column--fields {
    gap: 0.25rem;
}

/* Side panels become real cards so the page has figure/ground instead of
   three identical transparent stripes. */
.work-editor-page[b-gwf1n730ou]  .work-editor-column--card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-info {
    position: static;
    padding: 1.5rem;
    gap: 1.1rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-info .mud-typography {
    line-height: 1.45;
}

/* Section headings: small caps with a primary-colored tick for scannability. */
.work-editor-page[b-gwf1n730ou]  .work-editor-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-section-title::before {
    content: "";
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.66rem;
}

/* Extra breathing room above the Children sub-heading, separating it from the parent block. */
.work-editor-page[b-gwf1n730ou]  .work-editor-related-label--children {
    margin-top: 0.85rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-empty {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* Related rows: hover surface; per-row actions stay hidden until the row is
   hovered or focused so the list reads as content, not as a button farm. */
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row {
    min-width: 0;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-row .mud-icon-button {
    padding: 4px;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-row .mud-icon-button,
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row .mud-menu {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:hover,
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:focus-within {
    background-color: var(--mud-palette-action-default-hover);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:hover .mud-icon-button,
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:hover .mud-menu,
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:focus-within .mud-icon-button,
.work-editor-page[b-gwf1n730ou]  .work-editor-related-row:focus-within .mud-menu {
    opacity: 1;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* "Cannot start until" rows. A still-blocking entry gets a warning left rule so the panel says at a
   glance which of the listed items are actually holding this one back. The colour is mixed toward
   the text colour rather than used raw, so it clears AA on the panel surface in both themes. */
.work-editor-page[b-gwf1n730ou]  .work-editor-dependency--blocking {
    border-left: 3px solid color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
    padding-left: calc(0.4rem - 3px);
}

/* The kind ("After it finishes") sits under its row as a quiet caption — it qualifies the link
   above rather than competing with it for the row's width. */
.work-editor-page[b-gwf1n730ou]  .work-editor-dependency__kind {
    display: block;
    margin: -0.15rem 0 0.35rem 1.9rem;
    color: var(--mud-palette-text-secondary);
}

/* A listed predecessor that clears after this item is due to begin — the plan the Gantt draws in
   red. Amber, aligned under the kind caption it qualifies. */
.work-editor-page[b-gwf1n730ou]  .work-editor-dependency__conflict {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: -0.25rem 0 0.4rem 1.9rem;
    color: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
}

html[data-dark-mode="true"] .work-editor-page[b-gwf1n730ou]  .work-editor-dependency__conflict {
    color: var(--mud-palette-warning);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-dependency__conflict .mud-icon-root {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── "Add a blocking item": kind first, then the date-filtered picker ─────────────────────────── */

.work-editor-page[b-gwf1n730ou]  .work-editor-depadd {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-depadd__kind {
    align-self: flex-start;
}

/* Why the pick was refused. Same amber as the out-of-order caption — it is the same fact, caught a
   moment earlier. */
.work-editor-page[b-gwf1n730ou]  .work-editor-depadd__reject {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    color: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
}

html[data-dark-mode="true"] .work-editor-page[b-gwf1n730ou]  .work-editor-depadd__reject {
    color: var(--mud-palette-warning);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-depadd__reject .mud-icon-root {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Dropdown rows carry the candidate's schedule under the label, so "does this clear in time?" is
   answerable from the list itself. */
.work-editor-page[b-gwf1n730ou]  .work-editor-depitem {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-depitem__when {
    color: var(--mud-palette-text-secondary);
    margin-left: 1.75rem;
}

/* Too late to be waited on. Left visible and legible — this row is the explanation — but struck
   through and dimmed so it never reads as a choice. Selecting it is refused in code. */
.work-editor-page[b-gwf1n730ou]  .work-editor-depitem--late .work-editor-depitem__label {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-depitem--late .work-editor-depitem__when {
    color: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
}

html[data-dark-mode="true"] .work-editor-page[b-gwf1n730ou]  .work-editor-depitem--late .work-editor-depitem__when {
    color: var(--mud-palette-warning);
}

/* Align the text "Add parent/child" buttons with the rows above them. */
.work-editor-page[b-gwf1n730ou]  .work-editor-related-add {
    align-self: flex-start;
    margin-top: 0.15rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-add .mud-button-root {
    padding-left: 6px;
    padding-right: 8px;
}

/* Discrete action row under the parent picker ("Select active project" / "Create parent"):
   smaller, sentence-case labels so they read as shortcuts rather than primary actions. */
.work-editor-page[b-gwf1n730ou]  .work-editor-related-add--compact .mud-button-root {
    font-size: 0.72rem;
    text-transform: none;
}

/* Stacked, compact add/create-child actions shown above the children list. The labels are
   long (longer still in Spanish), so they render small, sentence-case, one per line. */
.work-editor-page[b-gwf1n730ou]  .work-editor-related-add--stacked {
    margin-top: 0;
    margin-bottom: 0.2rem;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-related-add--stacked .mud-button-root {
    font-size: 0.72rem;
    text-transform: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-dates__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-dates__picker {
    flex-grow: 1;
}

@media (max-width: 768px) {
    .work-editor-page[b-gwf1n730ou]  .work-editor-dates {
        grid-template-columns: 1fr;
    }
}

/* The "Start restrictions" panel body. The rows inside are the same related-item rows the links
   sidebar uses, which rely on flex-gap rhythm rather than margins — so restore that column here. */
.work-editor-page[b-gwf1n730ou]  .work-editor-startrules {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* The lock on the panel head, shown while a restriction is actually holding the item. A glyph is a
   non-text essential (3:1), and neither raw nor darkened amber clears that on both surfaces — raw
   is 2.2:1 on the light paper — so it is set per theme, as on the Gantt's marks. */
.work-editor-page[b-gwf1n730ou]  .work-editor-startrules__lock {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
}

html[data-dark-mode="true"] .work-editor-page[b-gwf1n730ou]  .work-editor-startrules__lock {
    color: var(--mud-palette-warning);
}

/* The date lock: the "cannot start before" switch and its note as one tinted unit with a left accent
   bar, so it reads as a rule about the start date rather than as a loose switch among the sequencing
   rows below it. The accent intensifies to the info color while the lock is actually holding. */
.work-editor-page[b-gwf1n730ou]  .work-editor-startgroup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.4rem 0.625rem 0.5rem;
    border-inline-start: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    transition: border-color 160ms ease, background-color 160ms ease;
}

.work-editor-page[b-gwf1n730ou]  .work-editor-startgroup--locked {
    border-inline-start-color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-startgroup__note {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-info);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-startgroup__note .mud-icon-root {
    font-size: 1rem;
}

/* The immediate-parent breadcrumb shows its full name (no truncation);
   long names simply wrap within the header. */
.work-editor-page[b-gwf1n730ou]  .work-editor-parent-ref {
    min-width: 0;
    color: var(--mud-palette-text-secondary);
}

/* Breadcrumb project that is NOT the active project: dimmed icon + link (paired with the
   hollow/outlined icon set in markup) so the active project stands out by contrast. */
.work-editor-page[b-gwf1n730ou]  .work-editor-parent-ref--inactive .mud-icon-root,
.work-editor-page[b-gwf1n730ou]  .work-editor-parent-ref--inactive a.mud-link {
    color: var(--mud-palette-text-disabled);
}

.work-editor-page[b-gwf1n730ou]  .work-editor-breadcrumbs .work-editor-ancestor--inactive {
    color: var(--mud-palette-text-disabled);
}

@media (min-width: 1600px) {
    .work-editor-page[b-gwf1n730ou]  .work-editor-column {
        padding: 1.5rem;
        gap: 1.1rem;
    }

    .work-editor-page[b-gwf1n730ou]  .work-editor-info {
        padding: 1.65rem;
    }
}

@media (max-width: 1919.98px) {
    .work-editor-page[b-gwf1n730ou]  .work-editor-column {
        padding: 1.1rem;
    }

    .work-editor-page[b-gwf1n730ou]  .work-editor-info {
        padding: 1.25rem;
    }
}

/* Audit stamp closing the Details card — metadata, so it is set off by a hairline.
   Targets AnvLastUpdated's own root, which is absent on an unsaved work. */
.work-editor-page[b-gwf1n730ou]  .anv-last-updated {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Features/Works/WorkList.razor.rz.scp.css */
/* Title + filter bar live above the grid (not in the grid toolbar) so expanding the filter panel
   grows this header and the grid below shrinks to fit — the list moves down instead of the panel
   overlaying the rows or forcing an outer scrollbar. */
.work-list-header[b-o71t5wuzuk] {
    flex: 0 0 auto;
    /* extra top padding so the filter-count badge (which overflows above the Filters button) isn't
       clipped by the grid container's top edge */
    padding: 0.6rem 0.5rem 0.25rem;
}

/* Let the grid take the remaining height (basis 0 so it grows into the space left by the header,
   rather than the shared rule's height:100% which would fight the header for room) and keep its
   own internal row scrolling. */
[b-o71t5wuzuk] .mud-data-grid {
    flex: 1 1 0;
    min-height: 0;
}

/* The single-series drill-down banner replaces the filter bar in the header; keep it flush with the
   header padding and off the grid below. */
[b-o71t5wuzuk] .work-list-series-filter {
    margin: 0;
}

/* Virtual (not yet materialized) occurrences of a repeating task render dimmed and italic so they
   read as "scheduled" rather than existing work; they become normal rows once saved. */
[b-o71t5wuzuk] .work-row--virtual td {
    opacity: 0.65;
    font-style: italic;
}

/* Group-by row under the filter bar: caption + toggle + expand/collapse on one compact line. */
.work-list-groupby[b-o71t5wuzuk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.35rem;
}

/* Toggle items: icon + label inline (same shape as the spent report's group-by toggle). */
.work-list-groupby__opt[b-o71t5wuzuk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Breathing room between the View toggle and the Detail outline-level toggle. */
.work-list-groupby__detail-label[b-o71t5wuzuk] {
    margin-left: 0.75rem;
}

/* Cap note shown when the grouped view holds only the first slice of a larger filtered set. */
[b-o71t5wuzuk] .work-list-group-cap {
    margin: 0.35rem 0 0;
}

/* Grouped-mode group header: icon + group name + item count on one line. */
.work-list-group-header[b-o71t5wuzuk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.work-list-group-header__icon[b-o71t5wuzuk] {
    color: var(--mud-palette-primary);
}

.work-list-group-header__count[b-o71t5wuzuk] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
}
/* /Features/Works/WorkOrganizerPage.razor.rz.scp.css */
.wo-loading[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

.wo-page[b-yclr9f1mev] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
}

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

.wo-header[b-yclr9f1mev] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.wo-eyebrow[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.wo-title[b-yclr9f1mev] {
    margin: 0.2rem 0 0.15rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.wo-hint[b-yclr9f1mev] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    max-width: 56ch;
}

.wo-header__tools[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wo-search[b-yclr9f1mev] {
    min-width: 16rem;
}

/* ── body: tree + move log ──────────────────────────────────────────────── */

.wo-body[b-yclr9f1mev] {
    display: grid;
    grid-template-columns: 1fr 21rem;
    min-height: 0;
    overflow: hidden;
}

/* pinned detach bar (auto) above the scrollable, virtualized tree (1fr) */
.wo-tree[b-yclr9f1mev] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
}

.wo-scroll[b-yclr9f1mev] {
    overflow: auto;
    min-height: 0;
    padding: 0.5rem 1rem 2rem;
}

.wo-empty[b-yclr9f1mev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    grid-row: 1 / -1;
    height: 100%;
    text-align: center;
}

/* sticky action bar: selection count on the left, move/detach/clear controls on the right */
.wo-actionbar[b-yclr9f1mev] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.5rem 1rem 0.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 0.5rem;
    background: var(--mud-palette-surface);
}

.wo-actionbar__hint[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.wo-actionbar__info[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.wo-actionbar__controls[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wo-actionbar__label[b-yclr9f1mev] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.wo-actionbar__or[b-yclr9f1mev] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-disabled);
}

.wo-actionbar__warn[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--mud-palette-warning-text, var(--mud-palette-text-secondary));
}

.wo-dest[b-yclr9f1mev] {
    min-width: 17rem;
}

/* ── move log rail ──────────────────────────────────────────────────────── */

.wo-log[b-yclr9f1mev] {
    border-left: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wo-log__head[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.wo-log__empty[b-yclr9f1mev] {
    padding: 1.25rem 1rem;
}

.wo-log__list[b-yclr9f1mev] {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    overflow: auto;
}

.wo-log__item[b-yclr9f1mev] {
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
}

.wo-log__item + .wo-log__item[b-yclr9f1mev] {
    margin-top: 0.15rem;
}

.wo-log__item--undone[b-yclr9f1mev] {
    opacity: 0.6;
}

.wo-log__line[b-yclr9f1mev] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wo-log__label[b-yclr9f1mev] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-log__time[b-yclr9f1mev] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.wo-log__path[b-yclr9f1mev] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.2rem;
}

.wo-log__from[b-yclr9f1mev],
.wo-log__to[b-yclr9f1mev] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7.5rem;
}

.wo-log__to[b-yclr9f1mev] {
    color: var(--mud-palette-text-primary);
}

.wo-log__arrow[b-yclr9f1mev] {
    flex: none;
}

.wo-log__actions[b-yclr9f1mev] {
    margin-top: 0.2rem;
}

@media (max-width: 960px) {
    .wo-body[b-yclr9f1mev] {
        grid-template-columns: 1fr;
    }

    .wo-log[b-yclr9f1mev] {
        display: none;
    }
}
/* /Features/Works/WorkSeriesCalendarPage.razor.rz.scp.css */
.series-cal-page[b-g44igr0ifn] {
    padding: 1.5rem 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header mirrors the series list page: title cluster left, month navigation right. */
.series-cal-header[b-g44igr0ifn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.series-cal-header__lead[b-g44igr0ifn] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.series-cal-back[b-g44igr0ifn] {
    margin-top: 0.15rem;
}

.series-cal-badge[b-g44igr0ifn] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.series-cal-heading[b-g44igr0ifn] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.series-cal-title[b-g44igr0ifn] {
    font-weight: 600;
    line-height: 1.2;
}

.series-cal-subtitle[b-g44igr0ifn] {
    color: var(--mud-palette-text-secondary);
    max-width: 52ch;
}

.series-cal-nav[b-g44igr0ifn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

/* Fixed-ish width so the arrows don't shift as month-name length changes. */
.series-cal-month[b-g44igr0ifn] {
    min-width: 11ch;
    text-align: center;
    font-weight: 600;
}

.series-cal-progress[b-g44igr0ifn] {
    margin-bottom: 0.5rem;
}

/* ── Month grid ─────────────────────────────────────────────────────────── */

.sc-grid[b-g44igr0ifn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* Cell separators: every cell draws right+bottom, last column drops the right edge
   (header cells are children 1-7, so 7n covers both the header row and day rows). */
.sc-grid > *[b-g44igr0ifn] {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sc-grid > *:nth-child(7n)[b-g44igr0ifn] {
    border-right: none;
}

.sc-dow[b-g44igr0ifn] {
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.sc-day[b-g44igr0ifn] {
    min-height: 6.5rem;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sc-day--muted[b-g44igr0ifn] {
    background: var(--mud-palette-background-gray);
}

.sc-day--muted .sc-day__num[b-g44igr0ifn] {
    color: var(--mud-palette-text-disabled);
}

.sc-day--today[b-g44igr0ifn] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.sc-day__num[b-g44igr0ifn] {
    align-self: flex-end;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.1rem 0.15rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Occurrence chips ───────────────────────────────────────────────────── */

.sc-chip[b-g44igr0ifn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.25;
    text-decoration: none;
    min-width: 0;
}

.sc-chip__label[b-g44igr0ifn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The MudIcon inside renders in a child scope, so it needs ::deep to be reachable. */
.sc-chip[b-g44igr0ifn]  svg {
    flex: 0 0 auto;
}

/* Pending: info-tinted, foreground darkened toward the text color so it passes AA on the
   pale tint in both themes (never a --mud-palette-*-text on a tint). */
.sc-chip--pending[b-g44igr0ifn] {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-info) 55%, var(--mud-palette-text-primary));
}

a.sc-chip--pending:hover[b-g44igr0ifn] {
    background: color-mix(in srgb, var(--mud-palette-info) 26%, transparent);
}

.sc-chip--readonly[b-g44igr0ifn] {
    cursor: default;
}

/* Created: neutral tint; the status icon (its own Mud color) carries the state. */
.sc-chip--created[b-g44igr0ifn] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-text-primary);
}

a.sc-chip--created:hover[b-g44igr0ifn] {
    background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
}

.sc-chip--skipped[b-g44igr0ifn] {
    color: var(--mud-palette-text-disabled);
}

.sc-chip--skipped .sc-chip__label[b-g44igr0ifn] {
    text-decoration: line-through;
}

.sc-more[b-g44igr0ifn] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: none;
    background: none;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.sc-more:hover[b-g44igr0ifn] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

/* Narrow screens: keep the 7-column shape but shrink chips to their state icon only —
   the title attribute still reveals the summary. */
@media (max-width: 700px) {
    .series-cal-header[b-g44igr0ifn] {
        flex-direction: column;
        align-items: stretch;
    }

    .series-cal-nav[b-g44igr0ifn] {
        justify-content: center;
    }

    .sc-day[b-g44igr0ifn] {
        min-height: 4rem;
    }

    .sc-chip[b-g44igr0ifn] {
        justify-content: center;
        padding: 0.15rem;
    }

    .sc-chip__label[b-g44igr0ifn] {
        display: none;
    }
}
/* /Features/Works/WorkSeriesListPage.razor.rz.scp.css */
.series-list-page[b-w9xo1p4eza] {
    padding: 1.5rem 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header: title cluster on the left, primary action on the right. Aligned to the top so the
   multi-line description doesn't push the Add button off-centre. */
.series-list-header[b-w9xo1p4eza] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.series-list-header__lead[b-w9xo1p4eza] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.series-list-back[b-w9xo1p4eza] {
    margin-top: 0.15rem;
}

/* Soft tinted square behind the recurrence icon — a single focal mark instead of a bare icon
   floating next to the title. */
.series-list-badge[b-w9xo1p4eza] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.series-list-heading[b-w9xo1p4eza] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.series-list-title[b-w9xo1p4eza] {
    font-weight: 600;
    line-height: 1.2;
}

/* The long descriptive line reads as a supporting caption under the title, width-limited so it
   never stretches edge-to-edge and crowds the action button. */
.series-list-subtitle[b-w9xo1p4eza] {
    color: var(--mud-palette-text-secondary);
    max-width: 52ch;
}

.series-list-actions[b-w9xo1p4eza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.series-list-progress[b-w9xo1p4eza] {
    margin-top: 0.5rem;
}

.series-list-grid[b-w9xo1p4eza] {
    border-radius: 10px;
}

/* Centered, calm empty state with a clear call to action. */
.series-list-empty[b-w9xo1p4eza] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* MudIcon renders an <svg> sized by width/height (not font-size), so set the box explicitly. */
.series-list-empty__icon[b-w9xo1p4eza] {
    width: 3rem;
    height: 3rem;
    color: var(--mud-palette-text-disabled);
}
/* /Features/Works/WorksPage.razor.rz.scp.css */
.works-not-found[b-30waad0mit] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 60vh;
    text-align: center;
    padding: 32px;
}

.works-not-found__illustration[b-30waad0mit] {
    position: relative;
    margin-bottom: 8px;
}

.works-not-found__icon-wrapper[b-30waad0mit] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background-color: var(--mud-palette-action-disabled-background);
    opacity: 0.85;
}
/* /Features/Works/WorkView.razor.rz.scp.css */
.work-view-wrapper[b-9aqx46qn97] {
    height: 100%;
    overflow: auto;
    padding: 0.75rem 0.75rem 0;
}

.work-view-loading[b-9aqx46qn97] {
    min-height: 100%;
    gap: 0.75rem;
}

/* ── Panel shell ─────────────────────────────────────────────────────────── */
.work-panel[b-9aqx46qn97] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

/* ── Header: identity + edit entry point ─────────────────────────────────── */
.work-panel__head[b-9aqx46qn97] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "parent parent"
        "id     edit"
        "title  title";
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.work-panel__parent[b-9aqx46qn97] {
    grid-area: parent;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    transition: color 90ms ease;
}

.work-panel__parent:hover[b-9aqx46qn97] {
    color: var(--mud-palette-primary);
}

.work-panel__parent-num[b-9aqx46qn97] {
    font-family: var(--mud-typography-monospace-family, ui-monospace, "Cascadia Code", "SF Mono", monospace);
    font-weight: 600;
    flex-shrink: 0;
}

.work-panel__parent-sep[b-9aqx46qn97] {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.work-panel__parent-title[b-9aqx46qn97] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-panel__id[b-9aqx46qn97] {
    grid-area: id;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.work-panel__type[b-9aqx46qn97] {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.work-panel__sep[b-9aqx46qn97] {
    color: var(--mud-palette-text-disabled);
}

.work-panel__num[b-9aqx46qn97] {
    font-family: var(--mud-typography-monospace-family, ui-monospace, "Cascadia Code", "SF Mono", monospace);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    letter-spacing: 0.02em;
}

.work-panel__title[b-9aqx46qn97] {
    grid-area: title;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.work-panel__edit[b-9aqx46qn97] {
    grid-area: edit;
    align-self: start;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.work-panel__tabs[b-9aqx46qn97] {
    margin-top: 0.25rem;
}

/* Icon-only tabs: min-width is dropped via MudTabs MinimumTabWidth="0px"; just trim
   the per-tab padding so the four tabs fit the panel and the scroll chevrons vanish. */
.work-panel[b-9aqx46qn97]  .work-panel__tabs--compact .mud-tab {
    padding: 0 12px;
}

/* The tab body re-creates the vertical rhythm the sections had inside .work-panel. */
.work-panel[b-9aqx46qn97]  .work-panel__tab-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.85rem;
}

/* ── Rapid edit band ─────────────────────────────────────────────────────── */
.work-panel__quick[b-9aqx46qn97] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    transition: opacity 120ms ease;
}

/* While a quick edit is persisting, dim and lock the band instead of toggling the controls to
   read-only. Toggling read-only swaps AnvSelectUser to its shorter markup, which made the row
   shrink and the "Assign to me" link flash out and back on every status/priority change. */
.work-panel__quick[aria-busy="true"][b-9aqx46qn97] {
    opacity: 0.7;
    pointer-events: none;
}

.work-panel__quick-label[b-9aqx46qn97] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

/* At 0.68rem this is small text, so it needs 4.5:1. The light palette's primary
   (#2196f3) manages only 2.9:1 against the band fill, so darken it there; the
   dark palette's lighter blue already clears AA at 5.6:1. */
html[data-dark-mode="false"] .work-panel__quick-label[b-9aqx46qn97] {
    color: color-mix(in srgb, var(--mud-palette-primary) 70%, #000);
}

.work-panel__quick-label .mud-icon-root[b-9aqx46qn97] {
    font-size: 1rem;
}

.work-panel__quick-spinner[b-9aqx46qn97] {
    margin-left: auto;
}

.work-panel__quick-row[b-9aqx46qn97] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.work-panel__chips[b-9aqx46qn97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.35rem;
}

/* The icon-only chips read as tappable affordances, not flat labels. */
.work-panel__chips[b-9aqx46qn97]  .anv-enum-chip-chip:not(.anv-enum-chip-chip--readonly) {
    cursor: pointer;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 90ms ease, box-shadow 90ms ease;
}

.work-panel__chips[b-9aqx46qn97]  .anv-enum-chip-chip:not(.anv-enum-chip-chip--readonly):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.work-panel__assignee[b-9aqx46qn97] {
    flex: 1 1 220px;
    min-width: 200px;
}

/* The assignee field is not validated here (no RequiredError), so drop the reserved helper/error
   line that otherwise pushes the "Assign to me" link well below the field. */
.work-panel__assignee[b-9aqx46qn97]  .mud-input-control .mud-input-helper-text {
    display: none;
}

.work-panel__assignee[b-9aqx46qn97]  .mud-grid-item.d-flex {
    margin-top: -0.5rem;
}

/* ── Estimate tracker ────────────────────────────────────────────────────── */
.work-panel__estimate[b-9aqx46qn97]  .anv-estimate-tracker {
    border-radius: 8px;
}

/* ── Informative facts (read-only) ───────────────────────────────────────── */
.work-panel__info[b-9aqx46qn97] {
    padding: 0.25rem 0.25rem 0;
}

.work-panel__facts[b-9aqx46qn97] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
    margin: 0;
}

.work-panel__fact[b-9aqx46qn97] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.work-panel__fact dt[b-9aqx46qn97] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.work-panel__fact dd[b-9aqx46qn97] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* The blocking-items list is a stack of links, not a one-line value, so it takes the whole row
   rather than squeezing into one of the two fact columns. */
.work-panel__fact--wide[b-9aqx46qn97] {
    grid-column: 1 / -1;
}

.work-panel__fact--wide dd[b-9aqx46qn97] {
    align-items: flex-start;
}

.work-panel__dependencies[b-9aqx46qn97] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.work-panel__dependencies li[b-9aqx46qn97] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* Still-blocking entries carry the warning colour on their label too, so the row reads as
   "waiting" without relying on the icon alone. */
.work-panel__dependency--blocking[b-9aqx46qn97]  .mud-typography {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

/* ── Description ─────────────────────────────────────────────────────────── */
.work-panel__description[b-9aqx46qn97] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.25rem 0.25rem 0;
}

.work-panel__description-label[b-9aqx46qn97] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.work-panel__description-text[b-9aqx46qn97] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Children links ──────────────────────────────────────────────────────── */
.work-panel__children[b-9aqx46qn97] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.work-panel__children-head[b-9aqx46qn97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.work-panel__children-count[b-9aqx46qn97] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.work-panel__children-list[b-9aqx46qn97] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.work-panel__child[b-9aqx46qn97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none;
    transition: border-color 90ms ease, background 90ms ease;
}

.work-panel__child:hover[b-9aqx46qn97] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.work-panel__child-num[b-9aqx46qn97] {
    font-family: var(--mud-typography-monospace-family, ui-monospace, "Cascadia Code", "SF Mono", monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.work-panel__child-title[b-9aqx46qn97] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-panel__child-go[b-9aqx46qn97] {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.work-panel__child:hover .work-panel__child-go[b-9aqx46qn97] {
    color: var(--mud-palette-primary);
}

/* ── Narrow panel: stack the quick-edit row ──────────────────────────────── */
@media (max-width: 560px) {
    .work-panel__facts[b-9aqx46qn97] {
        grid-template-columns: 1fr;
    }

    .work-panel__assignee[b-9aqx46qn97] {
        flex-basis: 100%;
    }
}

/* ── Audit stamp ────────────────────────────────────────────────────────── */
/* Closes the Details tab, set off by a hairline so it reads as metadata rather
   than another fact row. Targets AnvLastUpdated's own root so nothing is drawn
   when the item carries no audit stamp. */
.work-panel[b-9aqx46qn97]  .anv-last-updated {
    margin-top: 0.75rem;
    padding: 0.6rem 0.25rem 0;
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Layout/ActiveProjectIndicator.razor.rz.scp.css */
/* One control for both states: a standard outlined select on the app bar — a bordered rectangle
   with a caret, so it reads as something you open rather than as a status badge. It inherits the
   bar's foreground color, so it stays readable on the primary-colored bar (light) and the dark bar
   (dark mode). It opens the project picker, so it is a button — reset the UA button styling. */
.project-picker__activator[b-pgrmtiuhye] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 1rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    max-width: 18rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.75;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;

    &:hover, &:focus-visible {
        background: rgba(255, 255, 255, 0.24);
        border-color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }
}

/* No project selected: no fill and an italic label, so it reads as an invitation rather than state. */
.project-picker__activator--empty[b-pgrmtiuhye] {
    background: transparent;
    font-style: italic;
}

/* Shrinks (and ellipsizes) instead of pushing the caret out of the box. */
.project-picker__activator-label[b-pgrmtiuhye] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Narrow viewports: keep the project visible but yield space to the rest of the bar. */
@media (max-width: 900px) {
    .project-picker__activator[b-pgrmtiuhye] {
        max-width: 11rem;
    }
}

@media (max-width: 600px) {
    .project-picker__activator[b-pgrmtiuhye] {
        margin-left: 0.5rem;
        max-width: 8rem;
    }
}

/* The picker's popover is teleported to MudPopoverProvider at the layout root, outside this
   component's scope — its styles live in wwwroot/css/app.css (".project-picker__*"). */
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-cml0t5w783] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Tenant logo in the app bar — square-cropped on upload, so a fixed 40px tile. */
.app-brand-logo[b-cml0t5w783] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 7px;
    margin-left: 12px;
    flex-shrink: 0;
}

main[b-cml0t5w783] {
    flex: 1;
}

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

.app-content[b-cml0t5w783] {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Every `::deep` below is flat and top-level: nested, the scoped-CSS rewriter emits it
   literally and the browser discards the whole rule. See platform ADR-0019. */
.app-content[b-cml0t5w783]  .edit-form {
    width: 100%;
}

.app-content[b-cml0t5w783]  .work-editor-page {
    width: 100%;
    max-width: none;
}

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

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

.top-row[b-cml0t5w783]  a:hover,
.top-row[b-cml0t5w783]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-cml0t5w783]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

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

    .top-row[b-cml0t5w783]  a,
    .top-row[b-cml0t5w783]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-cml0t5w783] {
        width: 15.625rem;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-cml0t5w783] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-cml0t5w783]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-cml0t5w783],
    article[b-cml0t5w783] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-yxiyiglgoq] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-brand[b-yxiyiglgoq] {
    font-size: 1.1rem;
}

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

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

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

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

.nav-item[b-yxiyiglgoq] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-yxiyiglgoq] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-yxiyiglgoq] {
        padding-bottom: 1rem;
    }

    .nav-item[b-yxiyiglgoq]  a {
        color: #d7d7d7;
        border-radius: 0.25rem;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-yxiyiglgoq]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-yxiyiglgoq]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}




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

    .collapse[b-yxiyiglgoq] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-yxiyiglgoq] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}