@import '_content/AgencyRoot.Extensions.Blazor.WebAssembly/AgencyRoot.Extensions.Blazor.WebAssembly.gdk4sv1shc.bundle.scp.css';

/* /Features/Contacts/Activities/Components/ActivityComponent.razor.rz.scp.css */
[b-l1zwuy6ik1] .mud-timeline-item-divider {
    min-width: 60px !important;
    padding: 0 !important;
}

[b-l1zwuy6ik1] .mud-timeline-item-content {
    max-width: calc(100% - 60px) !important;
    min-width: 280px;
}
/* /Features/Contacts/Activities/Components/ActivityMediaGroupComponent.razor.rz.scp.css */
.media-container[b-q1msmjs91r] {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.media-scroll[b-q1msmjs91r] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox - hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge - hide scrollbar */
}

.media-scroll[b-q1msmjs91r]::-webkit-scrollbar {
    display: none; /* Chrome/Safari - hide scrollbar */
}

.media-item[b-q1msmjs91r] {
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}

.media-item:hover[b-q1msmjs91r] {
    border-color: #9e9e9e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.media-scroll-button[b-q1msmjs91r] {
    position: absolute;
    z-index: 1;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.media-scroll-button-left[b-q1msmjs91r] {
    left: 0;
}

.media-scroll-button-right[b-q1msmjs91r] {
    right: 0;
}
/* /Features/Contacts/Activities/Components/SearchActivitiesComponent.razor.rz.scp.css */
[b-n8k229od7g] .mud-timeline-vertical.mud-timeline-position-start::before {
    left: 29px !important;
}
/* /Features/Contacts/Components/MergeContactsComponent.razor.rz.scp.css */
[b-307plhgrqa] .sticky-header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1;
}

[b-307plhgrqa] .text-align-center {
    text-align: center;
}
/* /Features/Contacts/Pages/ImportContactsPage.razor.rz.scp.css */
[b-j70u9o16hh] .text-align-center {
    text-align: center;
}
/* /Features/Documents/Components/DocumentsDashboardViewListComponent.razor.rz.scp.css */
.ar-view-list[b-te12gxo53p] {
    width: 100%;
}

.ar-view-list__row[b-te12gxo53p],
.ar-view-list__child[b-te12gxo53p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.ar-view-list__child[b-te12gxo53p] {
    position: relative;
}

.ar-view-list__row:hover[b-te12gxo53p],
.ar-view-list__child:hover[b-te12gxo53p] {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active-view highlight: the Primary brand green (#007E69) as a 12%-opacity tint
   plus a solid accent bar. The Ready-for-Auto-File badge uses the same brand green
   but as a solid filled pill, so "selected row" (subtle tint) and "positive count"
   (solid pill) stay distinguishable while sharing one brand colour. */
.ar-view-list__row--active[b-te12gxo53p] {
    background-color: rgba(0, 126, 105, 0.12);
    border-left: 3px solid #007E69;
    padding-left: 5px;
}

/* Child rows sit inside the tree gutter, so the top-level accent bar would land
   beside the connector rail and read as an indent jump that breaks the line. An
   active child uses the background highlight alone; the rail stays continuous. */
.ar-view-list__child.ar-view-list__row--active[b-te12gxo53p] {
    border-left: none;
    padding-left: 8px;
}

.ar-view-list__row-main[b-te12gxo53p] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Icon / label / badge live on MudBlazor child components, so their classes are
   not in this component's scope — reach them with ::deep from a scoped ancestor. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.ar-view-list__row[b-te12gxo53p]  .ar-view-list__label,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__label {
    min-width: 0;
}

/* Push every count badge to the right edge of its row regardless of the label
   width or the inline chevron, so all badges share a single right margin. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__badge,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__badge {
    margin: 0 0 0 auto;
}

/* The loading spinner shares the badge with the count text, so it must fit the
   small chip's line height rather than MudBlazor's default small diameter. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__badge-spinner,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__badge-spinner {
    width: 14px;
    height: 14px;
}

/* Inbox children indent. The tree rail is drawn per-child (below) rather than as
   a single container border, so the vertical line can terminate at the last
   child rather than running past it. */
.ar-view-list__children[b-te12gxo53p] {
    position: relative;
    margin-left: 19px;
    padding-left: 16px;
}

/* Vertical rail segment for each child, sitting in the container's left padding. */
.ar-view-list__child[b-te12gxo53p]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    height: 100%;
    border-left: 1px solid var(--mud-palette-lines-default, #cfcfcf);
}

/* Horizontal tick meeting the rail at the child's vertical center. */
.ar-view-list__child[b-te12gxo53p]::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    border-top: 1px solid var(--mud-palette-lines-default, #cfcfcf);
}

/* The last child stops the rail at its own center, turning the run into an
   "L" (terminating) rather than a "T" (continuing). */
.ar-view-list__child:last-child[b-te12gxo53p]::before {
    height: 50%;
}
/* /Features/Policies/Components/Notes/PolicyNoteListComponent.razor.rz.scp.css */
[b-vj8g1bazg9] .mud-table td {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}

[b-vj8g1bazg9] .mud-table {
    border: none;
    outline: none;
    box-shadow: none;
}
/* /Features/Policies/Components/Payments/PaymentsComponent.razor.rz.scp.css */

[b-0r9vbspu9r] .styled-table {
    width: 100%;
    border-collapse: collapse; 
}

[b-0r9vbspu9r] .styled-table th {
    padding: 10px;
    text-align: left;
    border: 1px solid black;
    font-weight: normal;
}


[b-0r9vbspu9r] .styled-table td {
    padding: 10px;
    text-align: right;
    border: 1px solid black;
}

[b-0r9vbspu9r] .styled-table tr {
    border-bottom: 1px solid black;
}
/* /Features/Policies/Components/PolicyDetails/LivestockGrossMarginTargetMarketingComponent.razor.rz.scp.css */
.lgm-target-marketing-table[b-jsm54hjt0f] {
    width: 100%;
    border-collapse: collapse;
}

.lgm-target-marketing-table td[b-jsm54hjt0f] {
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9;
    font-weight: 500;
}

.lgm-target-marketing-table .lgm-month[b-jsm54hjt0f] {
    border-bottom: 1px solid #e8e8e8;
}

.lgm-target-marketing-table .lgm-text[b-jsm54hjt0f] {
    text-align: right;
    border-bottom: 1px solid #e8e8e8;
    font-weight: normal !important;
}

.lgm-target-marketing-table tr:nth-child(odd) td[b-jsm54hjt0f] {
    background-color: white;
}
/* /Features/Policies/Components/PolicyDetails/MPCICoverageDetailComponent.razor.rz.scp.css */
.aphTable[b-fsn657xsmd] {
    width: 100%;
    border-collapse: collapse;
}

.aphTable td[b-fsn657xsmd] {
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9; 
    font-weight: 500;
}

.aphTable .aphCell[b-fsn657xsmd] {
    border-bottom: 1px solid #e8e8e8;
}

.aphTable .aphText[b-fsn657xsmd] {
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    font-weight: normal !important;
}

.aphTable tr:nth-child(odd) td[b-fsn657xsmd] {
    background-color: white;
}


/* /Features/Policies/Components/PolicyDetails/WholeFarmDetailComponent.razor.rz.scp.css */
.wfrp-table th[b-zicjklc13u] {
    font-weight: 500;
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9;
    padding: 6px 24px 6px 16px;
}

.wfrp-table[b-zicjklc13u] {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.wfrp-table td[b-zicjklc13u] {
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left; 
    background-color: #f9f9f9;
    padding: 6px 24px 6px 16px;
}

.wfrp-table tr:nth-child(odd) td[b-zicjklc13u] {
    background-color: white;
}

.wfrp-table tr:nth-child(odd) th[b-zicjklc13u] {
    background-color: white;
}


.wfrp-table-2 th[b-zicjklc13u] {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    background-color: white;
    padding: 6px 24px 6px 16px;
}

#tax-year[b-zicjklc13u] {
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

#allowable-revenue[b-zicjklc13u] {
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.wfrp-table-2[b-zicjklc13u] {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.wfrp-table-2 td[b-zicjklc13u] {
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9; 
    padding: 6px 24px 6px 16px;
}

.wfrp-table-2 tr:nth-child(odd) td[b-zicjklc13u] {
    background-color: white;
}

.wfrp-table-2 tr:nth-child(odd) th[b-zicjklc13u] {
    background-color: white;
}
/* /Features/Producers/Components/ProducerDocumentsListComponent.razor.rz.scp.css */
[b-21j1blod4j] .sort-label {
    display: block;
}
/* /Features/Shared/Components/Notifications/NotificationFieldItemComponent.razor.rz.scp.css */
/* Label side is a flex direction, so the same markup serves all four positions. */
.notifications-field-item[b-70gmfsas02] {
    align-items: center;
    display: inline-flex;
    gap: 2px 8px;
}

.notifications-field-item.-label-right[b-70gmfsas02] {
    flex-direction: row-reverse;
}

.notifications-field-item.-label-top[b-70gmfsas02] {
    align-items: flex-start;
    flex-direction: column;
}

.notifications-field-item.-label-bottom[b-70gmfsas02] {
    align-items: flex-start;
    flex-direction: column-reverse;
}

/* Each token pins BOTH sides of the pair: a background and its intended foreground. Usually
   that foreground is the palette's own contrast text, but not always — see the comment below
   for which tokens differ and the measured numbers behind them. Producers cannot send a color,
   so every pair here is authored and measured once. */
/* Foregrounds: the grey chip gets the palette's black, every coloured chip keeps white, and
   the success chip renders the primary palette because that is what this app uses for
   success semantics (Color.Primary appears an order of magnitude more often here than
   Color.Success). That makes -success and -primary resolve to the same background and
   foreground — and, since both share the same hover/focus-visible/active rule below, the same
   interaction-state background too. Two tokens with one appearance is the intended result of
   following the app's convention, not a bug.
   Measured against this app's AgencyRootTheme palette, three coloured tokens fail WCAG AA
   (4.5:1) with white text at rest and are left that way deliberately: info 3.12, warning 2.16,
   error 3.68. The same three tokens' hover/focus-visible/active backgrounds (see below) improve
   on that without clearing AA either: info 4.06, warning 3.00, error 4.24.
   Those (palette, palette-text) pairs are MudBlazor's own, so a Color.Warning chip anywhere
   in the app measures the same — fixing them here would make notification chips diverge from
   the rest of the app without fixing the app. `error` is not fixable in-palette at all: no
   MudBlazor colour clears 4.5:1 on error, -darken or -lighten. Tracked as a theme-level
   issue, not a notifications one.
   The grey chip is an exception because its gray-default + text-primary pairing was ours,
   not Mud's (Mud's filled default is text-primary on action-disabled-background), so
   darkening its text to the palette black — 3.75:1 to 5.24:1 — diverges from nothing. */
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-default {
    background-color: var(--mud-palette-gray-default);
    color: var(--mud-palette-black);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-primary {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-secondary {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-info {
    background-color: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-success {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-warning {
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-error {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.-dark {
    background-color: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
}

/* Text mode tints the font only. The -darken variant, not the raw palette main: raw warning yellow
   on a light surface fails contrast. `default` deliberately has no rule — it inherits body color.
   -darken is light-theme tuning only, not theme-aware: this app ships light-only today, so if a dark
   theme is ever enabled these rules need a .mud-theme-dark override using the -lighten variant. */
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-primary { color: var(--mud-palette-primary-darken); }
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-secondary { color: var(--mud-palette-secondary-darken); }
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-info { color: var(--mud-palette-info-darken); }
/* Success follows the chip to the primary palette so both render modes agree on hue: success-darken
   measures 3.32 on white (fails AA), primary-darken measures 7.96. */
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-success { color: var(--mud-palette-primary-darken); }
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-warning { color: var(--mud-palette-warning-darken); }
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-error { color: var(--mud-palette-error-darken); }
.notifications-field-item[b-70gmfsas02]  .notifications-field-text.-dark { color: var(--mud-palette-dark-darken); }

/* Chips are this feature's primary click target, so a clickable one needs feedback on hover, on
   keyboard focus, and on click — and MudBlazor already has an opinion about all three. Its own
   per-color hover rules key on .mud-chip-color-*, which these chips never carry (they pin the
   palette themselves instead of setting Color), so only Mud's generic hover rule applies — and it
   ties our token rule at (0,4,0), which the scoped bundle then wins by load order. MudBlazor's :focus-visible
   and :active rule washes both states to --mud-palette-action-disabled at that identical (0,4,0)
   tie, unaddressed, and since these chips carry no .mud-chip-color-* class the token rule's white
   text still applies on top of that grey background — roughly 1.9:1, worse than any failure this
   file accepts at rest. :active fires on every mouse click, not just keyboard use, and
   :focus-visible is a state keyboard users dwell in, so this was a real WCAG 1.4.3 defect, not a
   cosmetic one.
   Grouping :hover, :focus-visible and :active onto one selector here fixes all three: it takes
   specificity to (0,6,0) — the compiled selector carries the scope attribute Blazor's ::deep
   injects onto the leading class, which this source file doesn't show, so it's one component
   higher than the (0,5,0) you'd count from what's written here — which beats MudBlazor's per-color
   hover rules outright too (.mud-chip-filled.mud-chip-color-*.mud-clickable:hover:not(.mud-disabled),
   (0,5,0)), so this wins on specificity rather than falling back to load order. .mud-clickable
   scopes it to chips that actually navigate: MudChip adds that class only when OnClick is set. The
   -darken variant matches the value Mud uses for its own filled-chip hover. */
/* Inverted from the other seven: the `-default` token rule above makes this token's foreground the
   palette black, not white, so darkening the background in these states moves it toward the text
   and collapses contrast (gray-dark under black text measures 3.05, failing AA). Lightening
   instead keeps these states readable (gray-light measures 7.47) while still being visibly
   different from the gray-default rest state, so the affordance still reads. */
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-default:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-default:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-default:active {
    background-color: var(--mud-palette-gray-light);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-primary:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-primary:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-primary:active {
    background-color: var(--mud-palette-primary-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-secondary:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-secondary:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-secondary:active {
    background-color: var(--mud-palette-secondary-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-info:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-info:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-info:active {
    background-color: var(--mud-palette-info-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-success:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-success:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-success:active {
    background-color: var(--mud-palette-primary-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-warning:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-warning:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-warning:active {
    background-color: var(--mud-palette-warning-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-error:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-error:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-error:active {
    background-color: var(--mud-palette-error-darken);
}

.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-dark:hover,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-dark:focus-visible,
.notifications-field-item[b-70gmfsas02]  .notifications-section-chip.mud-clickable.-dark:active {
    background-color: var(--mud-palette-dark-darken);
}
/* /Features/Shared/Components/Notifications/NotificationItemComponent.razor.rz.scp.css */
/* No cursor: pointer here — the row body has no click handler (only the explicit "Mark as read"
   button and action link are clickable), and a pointer cursor over a plain row promises a click the
   UI does not honour. The hover background below stays: it is ordinary list-row affordance, not a
   click promise, and it still helps the user see which row's button they are about to hit. Do not
   restore the cursor "for consistency" — that would recreate the mismatch. */
.notifications-bell-item:hover[b-78hykb0ykw] {
    background-color: var(--mud-palette-action-default-hover);
}

.notifications-bell-item-unread[b-78hykb0ykw] {
    background-color: var(--mud-palette-background-gray);
}

/* The title is rendered by MudText (a child component), so it needs ::deep to receive scoped styles. */
[b-78hykb0ykw] .notifications-bell-title {
    flex: 0 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

.notifications-bell-audience[b-78hykb0ykw] {
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: 1;
    padding: 3px 8px;
}

.notifications-bell-actions[b-78hykb0ykw] {
    white-space: nowrap;
}

.notifications-bell-footer[b-78hykb0ykw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.notifications-bell-action[b-78hykb0ykw] {
    align-items: center;
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
}

/* The new-tab icon is rendered by MudIcon (a child component); match it to the caption-sized
   action label so the two read as one line. */
[b-78hykb0ykw] .notifications-bell-action-external {
    font-size: 1rem;
}

.notifications-bell-time[b-78hykb0ykw] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Text-variant tag chips tint the label. The -darken variant keeps warning legible on a light
   surface; `default` has no rule so it inherits today's look exactly.
   -darken is light-theme tuning only, not theme-aware: this app ships light-only today, so if a dark
   theme is ever enabled these rules need a .mud-theme-dark override using the -lighten variant. */
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-primary { color: var(--mud-palette-primary-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-secondary { color: var(--mud-palette-secondary-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-info { color: var(--mud-palette-info-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-success { color: var(--mud-palette-success-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-warning { color: var(--mud-palette-warning-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-error { color: var(--mud-palette-error-darken); }
.notifications-bell-footer[b-78hykb0ykw]  .notifications-tag-chip.-dark { color: var(--mud-palette-dark-darken); }
/* /Features/Shared/Components/Notifications/NotificationPreferencesPanelComponent.razor.rz.scp.css */
.notification-preferences-body[b-3ly2fl9zjp] {
    max-height: 480px;
    overflow-y: auto;
}

/* flex: 0 0 52px, not just width: 52px. Each row is a flex container, and a subcategory's label and
   description sit in the same row; a long description squeezes the row, and with the default
   flex-shrink these cells give up width instead. Rows then render their checkboxes at different
   widths depending on how long each description happens to be, so the columns never line up with
   each other or with the header. Pinning the basis makes the description wrap instead. */
.notification-preferences[b-3ly2fl9zjp]  .notification-preferences-col {
    display: inline-flex;
    flex: 0 0 52px;
    justify-content: center;
    margin: 0;
    text-align: center;
}

/* A bare MudCheckBox keeps a label gutter to the right; strip it so the box centers in the column. */
.notification-preferences[b-3ly2fl9zjp]  .notification-preferences-col .mud-checkbox {
    margin: 0;
}

.notification-preferences[b-3ly2fl9zjp]  .notification-preferences-col .mud-checkbox > .mud-button-root {
    padding: 0;
}
/* /Features/Shared/Components/Notifications/NotificationsBellComponent.razor.rz.scp.css */
/* Trim the icon button's default padding so the bell doesn't sit in a large pool
   of empty hit area in the toolbar. */
/* The bell button is wrapped in a badge span; inline-flex + center aligns its
   button on the row's center instead of the text baseline, so it lines up with
   the bare icon buttons next to it. */
.notifications-bell-root[b-tr5xfq1qhe] {
    align-items: center;
    display: inline-flex;
}

/* Pull the unread count in toward the bell glyph; the default overlap position
   floats it off the icon because the button hit area is larger than the glyph. */
.notifications-bell-root[b-tr5xfq1qhe]  .mud-badge {
    transform: translate(-12px, 14px);
}

.notifications-bell-panel[b-tr5xfq1qhe] {
    width: 460px;
}

.notifications-bell-filter-count[b-tr5xfq1qhe] {
    background: var(--mud-palette-error);
    border-radius: 10px;
    color: var(--mud-palette-error-text, #fff);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
}

.notifications-bell-list[b-tr5xfq1qhe] {
    max-height: 480px;
    overflow-y: auto;
}
/* /Features/Shared/Components/Notifications/NotificationSectionsComponent.razor.rz.scp.css */
.notifications-sections[b-ihi2v0ptdf]  .notifications-section-image {
    border-radius: 4px;
    max-height: 140px;
    object-fit: cover;
    width: 100%;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-markdown,
.notifications-sections[b-ihi2v0ptdf]  .notifications-section-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Clickable field value + its new-tab icon read as one centered line. */
.notifications-sections[b-ihi2v0ptdf]  .notifications-section-field-link {
    align-items: center;
    display: inline-flex;
    gap: 2px;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-field-external {
    font-size: 1rem;
}

/* mt-1 equivalent, kept in CSS so the layout modifiers live in one place. */
.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields {
    display: flex;
    margin-top: 4px;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields.-title-top {
    flex-direction: column;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields.-title-left {
    align-items: baseline;
    flex-direction: row;
    gap: 8px;
}

/* Even gap on BOTH axes: a wrapped second row spaces exactly like the first, and no margins are
   involved so nothing collapses unevenly. */
.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields.-horizontal .notifications-section-fields-items {
    align-items: center;
    flex-direction: row;
}

.notifications-sections[b-ihi2v0ptdf]  .notifications-section-fields.-vertical .notifications-section-fields-items {
    align-items: flex-start;
    flex-direction: column;
}
/* /Features/Tasks/Comments/TaskCommentIndicatorComponent.razor.rz.scp.css */
.task-comment-badge[b-r0dwxp5ffj]  .mud-badge {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    padding: 0 3px;
    transform: scale(1) translate(40%, -40%) !important;
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartLegendComponent.razor.rz.scp.css */
.ar-legend-dot[b-y57cu5tl4n] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartRowComponent.razor.rz.scp.css */
/* Instance-count chip acts as a "filter by this workflow" affordance, mirroring the
   bar segment hover treatment (brightness 0.9, 120ms). ::deep reaches the MudChip
   root rendered by the child component. */
[b-xym4f1bi50] .ar-instance-chip {
    cursor: pointer;
    transition: filter 120ms ease;
    /* Fixed min-width + centered content so the chip occupies the same
       horizontal space whether the count is 1, 2, 3, or 4 digits. This
       keeps the right-aligned workflow names from shifting row-to-row as
       the count changes (fits up to 9999; larger counts expand). */
    min-width: 2.75rem;
    justify-content: center;
}

[b-xym4f1bi50] .ar-instance-chip:hover {
    filter: brightness(0.9);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartStatusBarComponent.razor.rz.scp.css */
.ar-chart-bar[b-oug94onjwe] {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
}

.ar-chart-segment[b-oug94onjwe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    transition: filter 120ms ease;
}

.ar-chart-bar--clickable[b-oug94onjwe],
.ar-chart-bar--clickable .ar-chart-segment[b-oug94onjwe],
.ar-chart-segment--clickable[b-oug94onjwe] {
    cursor: pointer;
}

/* Highlight only the hovered section (e.g. Complete vs Incomplete), not the whole bar. */
.ar-chart-bar--clickable .ar-chart-segment:hover[b-oug94onjwe],
.ar-chart-segment--clickable:hover[b-oug94onjwe] {
    filter: brightness(0.9);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowDashboardChartsComponent.razor.rz.scp.css */
/* Shared chart-row layout for the workflow, steps, and assignee charts.
   ::deep reaches the label / bar / total elements rendered by the child
   components so all three keep a consistent, aligned column layout.
   Widening the label column shrinks the bar area, giving long workflow,
   step, and assignee names more room. Labels are right-aligned so the
   names sit flush against the bars (matches the mockup); for flex-based
   labels (workflow name + chip, assignee icon + name) flex-end achieves
   the same, while text-align handles the plain-text step labels. */
[b-f3g5j5ep6m] .ar-chart-label {
    width: 320px;
    min-width: 320px;
    justify-content: flex-end;
    text-align: right;
}

[b-f3g5j5ep6m] .ar-chart-bar {
    flex: 1 1 auto;
    min-width: 0;
}

[b-f3g5j5ep6m] .ar-chart-total {
    width: 70px;
    text-align: right;
}