/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────
   IMPORTANT SCOPING NOTE
   Blazor CSS isolation only tags elements MainLayout renders ITSELF
   (the brand link, the drawer-footer div, the seam toggle, <main>).
   MudBlazor component roots (MudDrawer/.cw-drawer, MudNavMenu/.cw-nav,
   MudAppBar/.cw-appbar, MudMainContent/.cw-content) never receive the
   scope attribute, so BOTH plain and ::deep selectors that start at
   those classes silently match nothing. All styling for them lives in
   wwwroot/css/app.css under "Sidebar & app frame". Keep only rules
   anchored at MainLayout's own elements in this file.
   ────────────────────────────────────────────────────────────────── */

/* Brand (own <a> element inside the drawer) — the shaving mark and the
   lowercase Fraunces wordmark on the iron rail, mirroring the login
   panel's lockup (fixed chalk/copper in both themes, exactly like the
   rail itself). */
.cw-brand[b-e76awppphb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 28px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.cw-brand:hover .cw-brand-name[b-e76awppphb] {
    color: var(--cw-chalk-bright);
}

.cw-brand:focus-visible[b-e76awppphb] {
    outline: 2px solid rgba(237, 229, 214, 0.7);
    outline-offset: 2px;
    border-radius: 8px;
}

.cw-brand-glyph[b-e76awppphb] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.cw-brand-name[b-e76awppphb] {
    font-family: var(--cw-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: rgba(237, 229, 214, 0.96);
    letter-spacing: -0.01em;
}

/* ── Content column (own <main>) ────────────────────────────────── */

.cw-content-inner[b-e76awppphb] {
    padding: 32px 40px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 959.98px) {
    .cw-content-inner[b-e76awppphb] {
        padding: 20px;
    }
}

/* ── Drawer footer & account button (own elements) ──────────────── */

.cw-drawer-footer[b-e76awppphb] {
    padding: 12px 16px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cw-rail-text-dim);
}

/* MudMenu wraps the activator; its root and our explicit account button
   both stretch so the identity card fills the expanded drawer. */
.cw-drawer-footer[b-e76awppphb]  .cw-user-menu {
    width: 100%;
}

.cw-account-trigger[b-e76awppphb] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid rgba(237, 229, 214, 0.2);
    background: rgba(237, 229, 214, 0.06);
    color: var(--cw-chalk-bright);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cw-account-avatar[b-e76awppphb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(237, 229, 214, 0.16);
    color: var(--cw-chalk-bright);
    font-size: 0.8125rem;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
}

.cw-account-copy[b-e76awppphb] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.cw-account-name[b-e76awppphb],
.cw-account-role[b-e76awppphb] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-account-name[b-e76awppphb] {
    color: var(--cw-chalk-bright);
    font-size: 0.8438rem;
    font-weight: 650;
}

.cw-account-role[b-e76awppphb] {
    margin-top: 2px;
    color: rgba(237, 229, 214, 0.68);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cw-account-caret[b-e76awppphb] {
    color: rgba(237, 229, 214, 0.72);
}

.cw-account-trigger:hover[b-e76awppphb] {
    border-color: rgba(237, 229, 214, 0.38);
    background: rgba(237, 229, 214, 0.1);
}

.cw-account-trigger:focus-visible[b-e76awppphb] {
    outline: 2px solid rgba(237, 229, 214, 0.7);
    outline-offset: 2px;
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.cw-notif-button[b-qp86n4r92l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.cw-notif-button:hover[b-qp86n4r92l] {
    background: rgba(128, 128, 128, 0.15);
}

.cw-notif-button:focus-visible[b-qp86n4r92l] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Drawer-nav variant: a button dressed as a nav link. MudBlazor's
   .mud-nav-link class supplies layout/hover; this resets button chrome
   and the nav data-count pill CSS in app.css supplies the badge. */
.cw-notif-nav[b-qp86n4r92l] {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.cw-notif-panel[b-qp86n4r92l] {
    width: 380px;
    max-width: 92vw;
    /* Explicit paper background so arbitrary (non-MudMenuItem) content can
       never render see-through, whatever the popover host paints. */
    background: var(--mud-palette-surface);
}

.cw-notif-header[b-qp86n4r92l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px 16px;
}

.cw-notif-title[b-qp86n4r92l] {
    font-weight: 600;
    font-size: 0.95rem;
}

.cw-notif-empty[b-qp86n4r92l] {
    padding: 24px 16px;
    font-size: 0.85rem;
    opacity: 0.7;
}

.cw-notif-items[b-qp86n4r92l] {
    /* Short phones: leave room for header + "See all" instead of letting
       the popover clip a row against the footer divider. */
    max-height: min(420px, calc(100dvh - 220px));
    overflow-y: auto;
    padding: 4px 0 12px;
}

/* Scroll affordance at the fold — a clipped sixth row otherwise reads
   as breakage rather than "there's more". */
.cw-notif-items[b-qp86n4r92l]::after {
    content: "";
    position: sticky;
    display: block;
    bottom: 0;
    height: 18px;
    margin-top: -18px;
    background: linear-gradient(to bottom, transparent, var(--mud-palette-surface));
    pointer-events: none;
}

.cw-notif-item[b-qp86n4r92l] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cw-notif-item:hover[b-qp86n4r92l] {
    background: rgba(128, 128, 128, 0.12);
}

.cw-notif-item-icon[b-qp86n4r92l] {
    margin-top: 2px;
    opacity: 0.7;
    flex-shrink: 0;
}

.cw-notif-item-body[b-qp86n4r92l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cw-notif-item-message[b-qp86n4r92l] {
    font-size: 0.85rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cw-notif-item--unread .cw-notif-item-message[b-qp86n4r92l] {
    font-weight: 600;
}

.cw-notif-item-meta[b-qp86n4r92l] {
    font-size: 0.75rem;
    opacity: 0.65;
    /* One line always — a wrapped orphan "ago" breaks the row rhythm.
       The client name yields; the timestamp stays whole. */
    display: flex;
    white-space: nowrap;
    min-width: 0;
}

.cw-notif-item-client[b-qp86n4r92l] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-notif-item-time[b-qp86n4r92l] {
    flex: 0 0 auto;
}

.cw-notif-item-dot[b-qp86n4r92l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    margin-top: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
/* Mobile-first: clients open portal links from email on their phones.
   One column, no sideways scroll at any width. */

.portal-shell[b-0x3sqzmt4w] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
}

.portal-header[b-0x3sqzmt4w] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.portal-brand[b-0x3sqzmt4w] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.portal-brand-mark[b-0x3sqzmt4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.portal-brand-name[b-0x3sqzmt4w] {
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-nav[b-0x3sqzmt4w] {
    display: flex;
    gap: 4px;
}

[b-0x3sqzmt4w] .portal-nav-link {
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

[b-0x3sqzmt4w] .portal-nav-link:hover {
    background: var(--mud-palette-action-default-hover);
}

[b-0x3sqzmt4w] .portal-nav-link.active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-weight: 600;
}

.portal-user[b-0x3sqzmt4w] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.portal-user-chip[b-0x3sqzmt4w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    transition: background 0.15s ease;
}

.portal-user-chip:hover[b-0x3sqzmt4w] {
    background: var(--mud-palette-action-default-hover);
}

.portal-user-avatar[b-0x3sqzmt4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-user-name[b-0x3sqzmt4w] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 32vw;
}

.portal-logout-form[b-0x3sqzmt4w] {
    display: inline;
}

.portal-logout[b-0x3sqzmt4w] {
    background: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.portal-logout:hover[b-0x3sqzmt4w] {
    background: var(--mud-palette-action-default-hover);
    border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 40%, var(--mud-palette-lines-default));
}

.portal-main[b-0x3sqzmt4w] {
    flex: 1;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    outline: none;
}

.portal-foot[b-0x3sqzmt4w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    font-size: 0.8rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.portal-foot-contact a[b-0x3sqzmt4w] {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.portal-foot-contact a:hover[b-0x3sqzmt4w] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .portal-user-name[b-0x3sqzmt4w] {
        display: none;
    }
}
/* /Components/Pages/Assets/List.razor.rz.scp.css */
/* Assets list — column discipline for the data grid.

   CSS-isolation note (see UI_STYLE_GUIDE.md): the classes below sit on
   MudDataGrid-rendered cells, which never carry the scope attribute, so
   every rule routes through the page's own `.data-grid-container` div. */

/* Asset names are identifiers — "SW-CORE-03" must never wrap to
   "SW-CORE-" / "03". The client · site caption is the flexible line. */
.data-grid-container[b-6p7aymj25j]  .grid-row-link {
    white-space: nowrap;
}

.data-grid-container[b-6p7aymj25j]  .asset-name-sub {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Serial + IP cells: one line each, so the auto table layout gives the
   identifier columns their content width and lets OS wrap instead. */
.data-grid-container[b-6p7aymj25j]  .asset-cell-id {
    white-space: nowrap;
}

.data-grid-container[b-6p7aymj25j]  .asset-col-secondary {
    white-space: nowrap;
}

/* Below 960px the low-signal columns yield the space: Expires and
   Last sync live on the asset detail page; name/status/IP/serial are
   what a technician actually scans a list for. */
@media (max-width: 959.98px) {
    .data-grid-container[b-6p7aymj25j]  .asset-col-secondary {
        display: none;
    }
}

/* Tablet band: even with the secondary columns hidden, the remaining
   identifier columns need room — floor the grid and let the report-table
   wrapper scroll it with the fade affordance instead of clipping serials. */
@media (min-width: 601px) and (max-width: 959.98px) {
    .data-grid-container.report-table[b-6p7aymj25j] {
        --cw-table-min: 700px;
    }
}
/* /Components/Pages/Billing/Components/MetricSourcePicker.razor.rz.scp.css */
.metric-source-picker[b-dzi5g9w14s] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.metric-source-picker[b-dzi5g9w14s]  .mud-input-control {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
}

.metric-source-picker[b-dzi5g9w14s]  .mud-select {
    flex: 1 1 220px;
    min-width: 0;
}

@media (max-width: 600px) {
    .metric-source-picker[b-dzi5g9w14s] {
        flex-direction: column;
    }

    .metric-source-picker[b-dzi5g9w14s]  .mud-input-control {
        flex-basis: auto;
        width: 100%;
    }

    .metric-source-picker[b-dzi5g9w14s]  .mud-select {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
    }
}
/* /Components/Pages/Billing/Components/TierBuilder.razor.rz.scp.css */
.tier-builder-row[b-co9pr7l06c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    width: 100%;
    min-width: 0;
}

.tier-builder-row[b-co9pr7l06c]  .mud-input-control {
    flex: 1 1 80px;
    width: auto;
    min-width: 72px;
    max-width: 100px;
}

@media (max-width: 600px) {
    .tier-builder-row[b-co9pr7l06c] {
        gap: 8px;
    }
}
/* /Components/Pages/Billing/Details.razor.rz.scp.css */
.details-shell.invoice-detail[b-0akx4n67uo] {
    padding: 24px;
}

.invoice-breadcrumb[b-0akx4n67uo] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.invoice-breadcrumb-sep[b-0akx4n67uo] {
    opacity: 0.4;
}

.invoice-breadcrumb-id[b-0akx4n67uo] {
    font-weight: 600;
    opacity: 0.7;
}

.invoice-detail-grid[b-0akx4n67uo] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 960px) {
    .invoice-detail-grid[b-0akx4n67uo] {
        grid-template-columns: 1fr;
    }
}

[b-0akx4n67uo] .invoice-main {
    padding: 20px;
}

.invoice-main-header[b-0akx4n67uo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

.invoice-main-header>div:first-child[b-0akx4n67uo] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-main-actions[b-0akx4n67uo] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    /* MudTable's phone layout makes each cell a label/value flex row. The
       description carries several lines, so let its label sit above them. */
    .invoice-detail[b-0akx4n67uo]  .mud-xs-table .mud-table-cell[data-label="Description"] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        padding: 10px 16px;
    }

    .invoice-detail[b-0akx4n67uo]  .mud-xs-table .mud-table-cell[data-label="Description"]::before {
        margin-bottom: 2px;
        padding-right: 0;
        padding-inline-end: 0;
    }

    .invoice-detail[b-0akx4n67uo]  .mud-xs-table .mud-table-cell[data-label="Description"] > .ml-2 {
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .details-shell.invoice-detail[b-0akx4n67uo] {
        padding: 16px;
    }

    .invoice-main-header[b-0akx4n67uo] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .invoice-main-actions[b-0akx4n67uo] {
        width: 100%;
        flex-wrap: wrap;
    }

    .invoice-main-actions[b-0akx4n67uo]  .mud-button-root {
        flex: 1 1 auto;
    }
}

.invoice-totals[b-0akx4n67uo] {
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
}

.invoice-totals-inner[b-0akx4n67uo] {
    min-width: 200px;
}

.invoice-total-row[b-0akx4n67uo] {
    display: flex;
    justify-content: space-between;
    /* The grand-total row is the widest child of the totals stack, so
       space-between alone leaves label and amount touching ("Total$…"). */
    gap: 24px;
    padding: 2px 0;
    font-size: 0.875rem;
}

/* The money side of each totals row is a machine value (label stays Inter). */
.invoice-total-row span:last-child[b-0akx4n67uo] {
    font-family: var(--cw-font-mono);
    font-variant-numeric: tabular-nums;
}

.invoice-total-grand[b-0akx4n67uo] {
    font-weight: 700;
    font-size: 1rem;
}

.invoice-total-grand span:last-child[b-0akx4n67uo] {
    font-weight: 600;
}

[b-0akx4n67uo] .invoice-sidebar {
    padding: 20px;
}

/* ── Grouped line items ── */

.invoice-group[b-0akx4n67uo] {
    margin-bottom: 8px;
}

.invoice-group-header[b-0akx4n67uo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
}

.invoice-group-subtotal[b-0akx4n67uo] {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.invoice-group-subtotal span:last-child[b-0akx4n67uo] {
    font-family: var(--cw-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Line-item tables match the Service Desk head treatment (identical values to
   .data-grid-container) so the invoice reads like the rest of the app. */
[b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

[b-0akx4n67uo] .invoice-main .mud-table-body td.mud-table-cell {
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

/* Machine values: `Class="cw-mono"` sits on the MudTd itself, and MudBlazor's
   `.mud-table-root .mud-table-body .mud-table-cell` family rule out-ranks the
   single-class global — restate the mono face at cell level here. */
[b-0akx4n67uo] .invoice-main .mud-table-body td.mud-table-cell.cw-mono {
    font-family: var(--cw-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
    font-synthesis-weight: none;
}

/* The stacked line-item tables (Recurring / Labor / Expenses …) are siblings:
   pin the numeric columns to shared widths so figures align vertically from
   table to table. Skipped below 600px, where MudTable switches to the stacked
   mobile layout. */
@media (min-width: 600px) {
    [b-0akx4n67uo] .invoice-main .mud-table-root {
        table-layout: fixed;
    }

    [b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell:nth-child(2) {
        width: 110px; /* Unit Price */
    }

    [b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell:nth-child(3) {
        width: 80px; /* Qty */
    }

    [b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell:nth-child(4) {
        width: 120px; /* Amount */
    }

    [b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell:nth-child(5) {
        width: 90px; /* Taxable */
    }

    [b-0akx4n67uo] .invoice-main .mud-table-head th.mud-table-cell:nth-child(6) {
        width: 96px; /* Edit/remove actions (draft only) */
    }
}

[b-0akx4n67uo] .invoice-main .mud-table-hover .mud-table-body .mud-table-row:hover {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 18%);
}

[b-0akx4n67uo] .invoice-coverage-line {
    opacity: 0.55;
    font-style: italic;
}
/* /Components/Pages/BillingWorkspace.razor.rz.scp.css */
/* 
 * All CSS for the Billing page has been moved to wwwroot/css/app.css 
 * to bypass Blazor's CSS isolation issues with child components like MudPaper.
 * See the /* ── Billing Page ──── section in app.css.
 */
/* /Components/Pages/Books/Index.razor.rz.scp.css */
/* Books page — scoped tweaks only; table/surface polish is global (app.css). */

/* Close tab: on narrow screens the readiness row wraps as whole units —
   a button drops to the next line instead of breaking its label in two. */
.books-close-row[b-5y62g5bak6]  .mud-button-root {
    white-space: nowrap;
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* Calendar page-scoped polish. The calendar's structural CSS lives in
   app.css ("Calendar workspace" section) because it predates this file;
   everything here rides on plain-HTML elements Calendar.razor renders
   itself, so the scoped selectors out-rank the app.css single-class
   rules they refine. */

/* ── Tech identity colors ───────────────────────────────────────────
   The original hues were a raw blue/purple/green/orange family that sat
   off the warm palette. These are the same deterministic 8-color family
   the client avatars use (GetClientAvatarBg in Tickets/List.razor and
   Clients/List.razor), with sky and orange darkened a step so a 9px dot
   and a 3px block edge still read against the paper surface. c8 is the
   Unassigned lane: a warm neutral, never an identity color. */
/* Identity, not status: a muted earth-toned family. The client-avatar
   palette's saturated hues are fine on 28px chips but painted whole
   calendar blocks violet/sky — these stay distinguishable while sitting
   in the workshop's calm register (blocks derive soft tints via
   color-mix, so both themes adapt). */
.cal-accent-c0[b-x0ayc7nmar], .cal-dot-c0[b-x0ayc7nmar] { --cal-accent: #4E6577; } /* steel */
.cal-accent-c1[b-x0ayc7nmar], .cal-dot-c1[b-x0ayc7nmar] { --cal-accent: #8B5E83; } /* plum */
.cal-accent-c2[b-x0ayc7nmar], .cal-dot-c2[b-x0ayc7nmar] { --cal-accent: #B05C6E; } /* dusty rose */
.cal-accent-c3[b-x0ayc7nmar], .cal-dot-c3[b-x0ayc7nmar] { --cal-accent: #517891; } /* dusty sky */
.cal-accent-c4[b-x0ayc7nmar], .cal-dot-c4[b-x0ayc7nmar] { --cal-accent: #A67C2E; } /* ochre */
.cal-accent-c5[b-x0ayc7nmar], .cal-dot-c5[b-x0ayc7nmar] { --cal-accent: #5E7D4D; } /* moss */
.cal-accent-c6[b-x0ayc7nmar], .cal-dot-c6[b-x0ayc7nmar] { --cal-accent: #3E7C74; } /* teal */
.cal-accent-c7[b-x0ayc7nmar], .cal-dot-c7[b-x0ayc7nmar] { --cal-accent: #A6493F; } /* brick */
.cal-accent-c8[b-x0ayc7nmar], .cal-dot-c8[b-x0ayc7nmar] { --cal-accent: #8B8272; } /* warm neutral — unassigned */

/* ── Technician chip strip: right-edge fade ─────────────────────────
   The strip scrolls (app.css .cal-legend); the wrapper hosts the fade
   that says "more techs off-canvas" instead of a hard mid-chip clip.
   In engines with scroll-driven animations the fade lifts at the scroll
   end (and never appears when everything fits); elsewhere it stays off
   and the thin scrollbar remains the affordance — no regression. */
.cal-legend-wrap[b-x0ayc7nmar] {
    position: relative;
    flex: 1 1 360px;
    min-width: 220px;
    max-width: 100%;
    timeline-scope: --cw-cal-legend;
}

.cal-legend[b-x0ayc7nmar] {
    scroll-timeline: --cw-cal-legend inline;
}

.cal-legend-wrap[b-x0ayc7nmar]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 2px;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to left, var(--mud-palette-surface), transparent);
    opacity: 0;
}

/* Mirrors the app.css ≤640px rule that targeted .cal-legend before the
   wrapper existed: the strip takes its own toolbar row on phones. */
@media (max-width: 640px) {
    .cal-legend-wrap[b-x0ayc7nmar] {
        flex-basis: 100%;
    }
}

/* ── Scroll-fold continuation hint ──────────────────────────────────
   Entries running past the visible hour range ended in a hard chop at
   the fold (e.g. a time-off block cut flush at 18:00). A sticky fade at
   the bottom of the scroller marks the continuation; it disappears once
   the day is scrolled to its end. Progressive enhancement, same terms
   as the legend fade. */
.cal-scroll[b-x0ayc7nmar] {
    scroll-timeline: --cw-cal-fold block;
}

.cal-scroll[b-x0ayc7nmar]::after {
    content: "";
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: block;
    height: 26px;
    margin-top: -26px;
    pointer-events: none;
    background: linear-gradient(to top, var(--mud-palette-surface), transparent);
    opacity: 0;
}

@supports (animation-timeline: scroll()) {
    .cal-legend-wrap[b-x0ayc7nmar]::after {
        animation: cw-cal-scroll-fade-b-x0ayc7nmar linear both;
        animation-timeline: --cw-cal-legend;
    }

    .cal-scroll[b-x0ayc7nmar]::after {
        animation: cw-cal-scroll-fade-b-x0ayc7nmar linear both;
        animation-timeline: --cw-cal-fold;
    }
}

@keyframes cw-cal-scroll-fade-b-x0ayc7nmar {
    0%, 96% { opacity: 1; }
    100% { opacity: 0; }
}
/* /Components/Pages/Clients/Details.razor.rz.scp.css */
.details-shell[b-e1ma44u9hu] {
    /* Matches the shared .page-shell width so every page lines up. */
    max-width: min(1320px, calc(100vw - 32px));
    width: 100%;
    margin: 0 auto;
}

/* MudPaper renders outside CSS isolation scope: use ::deep and scope it under details-shell. */
.details-shell[b-e1ma44u9hu]  .client-hero {
    padding: 24px;
    border-radius: 14px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 20%);
}

.client-hero-row[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-hero-avatar[b-e1ma44u9hu] {
    flex-shrink: 0;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.client-hero-avatar:focus-visible[b-e1ma44u9hu] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
    border-radius: var(--mud-default-borderradius);
}

.avatar-overlay[b-e1ma44u9hu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: var(--mud-default-borderradius);
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white;
    pointer-events: none;
}

.client-hero-avatar:hover .avatar-overlay[b-e1ma44u9hu] {
    opacity: 1;
}

.client-hero-main[b-e1ma44u9hu] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.client-hero-title[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.client-name[b-e1ma44u9hu] {
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-hero-meta[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    flex-wrap: wrap;
}

.client-meta-link[b-e1ma44u9hu] {
    color: var(--mud-palette-text-secondary);
}

.client-meta-link:hover[b-e1ma44u9hu] {
    color: var(--mud-palette-text-primary);
}

.client-meta-strong[b-e1ma44u9hu] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.client-meta-divider[b-e1ma44u9hu] {
    opacity: 0.7;
}

.client-hero-tags[b-e1ma44u9hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.client-hero-actions[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Tabs ────────────────────────────────────────────────────────── */

/* MudBlazor v9 uses .mud-tabs-tabbar as the header wrapper. */
.details-shell[b-e1ma44u9hu]  .client-tabs .mud-tabs-tabbar {
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
    border-radius: 14px !important;
    padding: 4px 6px;
}

.details-shell[b-e1ma44u9hu]  .client-tabs .mud-tab {
    min-height: 44px;
    border-radius: 10px;
}

.details-shell[b-e1ma44u9hu]  .client-tabs .mud-tabs-panels {
    padding: 16px 0 0;
}

/* ── Dashboard Cards ─────────────────────────────────────────────── */

.details-shell[b-e1ma44u9hu]  .dash-card {
    padding: 20px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.dash-card-header[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.dash-card-title[b-e1ma44u9hu] {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dash-card--summary .dash-card-header[b-e1ma44u9hu] {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: none;
}

.dash-header-action[b-e1ma44u9hu] {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.dash-header-action:hover[b-e1ma44u9hu] {
    color: var(--mud-palette-text-primary);
}

/* Key-value list inside Details card */
.dash-kv-list[b-e1ma44u9hu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-kv[b-e1ma44u9hu] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.dash-k[b-e1ma44u9hu] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.dash-v[b-e1ma44u9hu] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Notes */
.dash-notes[b-e1ma44u9hu] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    min-height: 28px;
}

/* Links */
.dash-link-list[b-e1ma44u9hu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-link-row[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}

/* ::deep so the rule also reaches MudLink roots carrying this class (a Mud
   component's root element never gets the isolation attribute). flex:1 packs
   each row left — text sits beside its leading icon and the trailing
   metadata/action cluster lands at a consistent x on every row. */
.details-shell[b-e1ma44u9hu]  .dash-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prose rows (QBR narrative, sales notes, reminders) wrap instead of
   hard-clipping mid-word at the card edge. */
.details-shell[b-e1ma44u9hu]  .dash-link-text--wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Long sales notes cap at 3 lines with an ellipsis. */
.details-shell[b-e1ma44u9hu]  .sales-note-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Docs: every row reserves the pin gutter (icon is visibility:hidden when
   unpinned) so pinned/unpinned titles share one left edge. */
.details-shell[b-e1ma44u9hu]  .doc-pin {
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* Tags */
.dash-tag-list[b-e1ma44u9hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Empty state */
.dash-empty[b-e1ma44u9hu] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    padding: 12px 0 4px;
}

.qbr-score[b-e1ma44u9hu] {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--mud-palette-text-primary);
}

.qbr-narrative[b-e1ma44u9hu] {
    white-space: pre-wrap;
}

.qbr-recommendations[b-e1ma44u9hu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details-shell[b-e1ma44u9hu]  .qbr-recommendation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border-radius: 10px;
}

.qbr-recommendation-main[b-e1ma44u9hu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.cw-grid-actions[b-e1ma44u9hu] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
}

.dash-summary[b-e1ma44u9hu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-summary-title[b-e1ma44u9hu] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.dash-summary-sub[b-e1ma44u9hu] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.dash-summary-rows[b-e1ma44u9hu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.dash-summary-row[b-e1ma44u9hu] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    min-width: 0;
}

.dash-summary-k[b-e1ma44u9hu] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-top: 2px;
}

/* Values wrap up to two lines instead of ellipsizing mid-word (timezones like
   "America/Chicago" were truncating). Only plain-HTML children match here —
   MudLink values keep their single line exactly as before. */
.dash-summary-row> :nth-child(2)[b-e1ma44u9hu] {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dash-mini-list[b-e1ma44u9hu] {
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.dash-mini-title[b-e1ma44u9hu] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.dash-mini-row[b-e1ma44u9hu] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    padding: 2px 0;
}

.dash-section-divider[b-e1ma44u9hu] {
    height: 1px;
    background: color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    margin: 16px 0 12px;
}

.dash-section-title[b-e1ma44u9hu] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.billing-overview-strip[b-e1ma44u9hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 12px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 8%);
}

.billing-health-card[b-e1ma44u9hu] {
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 10%);
}

.billing-health-header[b-e1ma44u9hu] {
    margin-bottom: 10px;
}

.billing-health-list[b-e1ma44u9hu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px;
}

.billing-health-item[b-e1ma44u9hu] {
    min-width: 0;
    min-height: 96px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 10px;
    padding: 7px 9px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 8%);
}

.billing-health-item-main[b-e1ma44u9hu] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.billing-health-item-title[b-e1ma44u9hu] {
    font-weight: 600;
    line-height: 1.15;
    font-size: 0.93rem;
}

.billing-health-item-detail[b-e1ma44u9hu] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.details-shell[b-e1ma44u9hu]  .billing-health-item .mud-button-root {
    min-width: 56px;
    white-space: nowrap;
    padding: 2px 10px;
    height: auto;
    font-size: 0.75rem;
    align-self: center;
    flex-shrink: 0;
}

.billing-table-wrap[b-e1ma44u9hu] {
    overflow-x: auto;
}

/* ::deep is required — without it the compiled selector demands the scope
   attribute on MudTable's own elements and matches nothing, so the table
   squeezed to min-content and clipped mid-header with no scroll. Scoped to
   desktop widths: these MudTables stack below 960px (Breakpoint.Sm) and a
   min-width there would force the stacked cards to scroll sideways. */
@media (min-width: 960px) {
    .details-shell[b-e1ma44u9hu]  .billing-table-wrap :is(table, .mud-table-container) {
        min-width: 640px;
    }
}

/* Stacked phone rows: let a cell's content wrap under its data-label instead
   of laying title + chips + captions out in one unshrinkable flex row (that
   row pushed the value columns off-screen, leaving labels with no values). */
@media (max-width: 959.98px) {
    .details-shell[b-e1ma44u9hu]  .billing-table-wrap td.mud-table-cell {
        flex-wrap: wrap;
        row-gap: 4px;
        min-width: 0;
    }
}

/* Embedded tables (contacts, sites, service items, invoices) adopt the
   Service Desk head treatment — identical values to .data-grid-container — so
   the detail cards read like the Clients/Users grids. Done via scoped CSS
   rather than a .data-grid-container wrapper to avoid a double border inside
   the already-outlined cards. Contacts/sites sit directly in .dash-card;
   service-items/invoices are wrapped in .billing-table-wrap. */
.details-shell[b-e1ma44u9hu]  .dash-card .mud-table-head th.mud-table-cell,
.details-shell[b-e1ma44u9hu]  .billing-table-wrap .mud-table-head th.mud-table-cell {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.details-shell[b-e1ma44u9hu]  .dash-card .mud-table-body td.mud-table-cell,
.details-shell[b-e1ma44u9hu]  .billing-table-wrap .mud-table-body td.mud-table-cell {
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

.details-shell[b-e1ma44u9hu]  .dash-card .mud-table-hover .mud-table-body .mud-table-row:hover,
.details-shell[b-e1ma44u9hu]  .billing-table-wrap .mud-table-hover .mud-table-body .mud-table-row:hover {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 18%);
}

/* MudSimpleTable renders plain <thead>/<tbody> without .mud-table-cell, so the
   in-card tables on the Tickets/Sales tabs need the same selectors
   .data-grid-container uses in app.css (identical values) to pick up the
   Service Desk head. :not(.mud-table-cell) keeps MudTable/MudDataGrid out. */
.details-shell[b-e1ma44u9hu]  .dash-card thead th:not(.mud-table-cell) {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.details-shell[b-e1ma44u9hu]  .dash-card tbody td:not(.mud-table-cell) {
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

.details-shell[b-e1ma44u9hu]  .dash-card .mud-table-hover tbody tr:hover td:not(.mud-table-cell) {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 18%);
}

/* Simple tables don't stack on phones — the Tickets/Sales tab tables wrap in
   the global .report-table (app.css) + --cw-table-min instead: a width floor
   plus horizontal scroll with a right-edge fade affordance. The old local
   .dash-table-scroll wrapper scrolled without any affordance, so trailing
   headers looked hard-clipped at the card edge. */

.billing-card-intro[b-e1ma44u9hu] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.details-shell[b-e1ma44u9hu]  .billing-toolbar-input.mud-input-control {
    margin-top: 0;
}

.billing-contract-toolbar[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-contract-search[b-e1ma44u9hu] {
    flex: 1 1 auto;
    min-width: 280px;
}

.billing-section-label[b-e1ma44u9hu] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-top: 2px;
}

.billing-section-label--manual[b-e1ma44u9hu] {
    margin-top: 4px;
}

/* The metrics list has no height-capped scroll pane: the old min(58vh, 680px)
   pane cut the last tile's "Used by" links mid-line, and even the sticky
   bottom fade read as a broken tile rather than a scroll hint. */

.billing-mono[b-e1ma44u9hu] {
    font-family: var(--cw-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.billing-chip-wrap[b-e1ma44u9hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.billing-metric-card[b-e1ma44u9hu] {
    border-left: 3px solid transparent;
}

.billing-metric-card--tracked[b-e1ma44u9hu] {
    border-left-color: color-mix(in oklab, var(--mud-palette-info), transparent 30%);
}

.billing-metric-card--manual[b-e1ma44u9hu] {
    border-left-color: color-mix(in oklab, var(--mud-palette-info), transparent 25%);
}

.billing-metric-avatar[b-e1ma44u9hu] {
    flex-shrink: 0;
}

.details-shell[b-e1ma44u9hu]  .billing-metric-avatar--tracked {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.details-shell[b-e1ma44u9hu]  .billing-metric-avatar--manual {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
}

.billing-metric-text[b-e1ma44u9hu] {
    min-width: 0;
}

.billing-metric-title-row[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.billing-metric-value[b-e1ma44u9hu] {
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: nowrap;
}

.billing-metric-meta[b-e1ma44u9hu] {
    margin-left: 44px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 8%);
    border-left: 2px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 20%);
    display: inline-block;
}

.billing-metric-links[b-e1ma44u9hu] {
    margin-left: 44px;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.billing-metric-links[b-e1ma44u9hu]  .mud-chip {
    height: auto;
    min-height: 26px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.billing-metric-links[b-e1ma44u9hu]  .mud-chip .mud-chip-content {
    white-space: normal;
    line-height: 1.3;
}

.billing-manual-editor[b-e1ma44u9hu] {
    background: var(--mud-palette-background-gray);
}

.billing-manual-editor--narrow[b-e1ma44u9hu] {
    max-width: 640px;
}

.billing-contract-summary[b-e1ma44u9hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.billing-empty-state[b-e1ma44u9hu] {
    border: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default), transparent 20%);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 12%);
}

.billing-contract-layout[b-e1ma44u9hu] {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.billing-contract-list-pane[b-e1ma44u9hu] {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(75vh, 800px);
    overflow-y: auto;
    position: sticky;
    top: 16px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 10%);
    min-width: 0;
    max-width: 100%;
}

.billing-contract-list-row[b-e1ma44u9hu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.billing-contract-list-item[b-e1ma44u9hu] {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    padding: 11px 12px;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.billing-contract-list-edit[b-e1ma44u9hu] {
    flex-shrink: 0;
}

.billing-contract-list-item:hover[b-e1ma44u9hu] {
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 35%);
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-primary) 4%);
}

.billing-contract-list-item--selected[b-e1ma44u9hu] {
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 25%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary), transparent 50%) inset;
}

.billing-contract-list-item--inactive[b-e1ma44u9hu] {
    opacity: 0.8;
}

.billing-contract-list-item-head[b-e1ma44u9hu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

.billing-contract-list-item-name[b-e1ma44u9hu] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.billing-contract-detail-pane[b-e1ma44u9hu] {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 12px;
    padding: 14px;
    background: var(--mud-palette-surface);
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.billing-contract-detail-header[b-e1ma44u9hu] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    position: sticky;
    top: 8px;
    z-index: 3;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 40%);
    border-radius: 10px;
    padding: 10px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 8%);
}

.billing-contract-detail-identity[b-e1ma44u9hu] {
    min-width: 0;
}

.billing-contract-detail-actions[b-e1ma44u9hu] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.billing-contract-description[b-e1ma44u9hu] {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 12%);
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-primary), transparent 60%);
    font-style: italic;
    color: var(--mud-palette-text-primary);
}

.billing-contract-alert[b-e1ma44u9hu] {
    margin-bottom: 8px;
}

.billing-service-items-surface[b-e1ma44u9hu] {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 15%);
    padding: 6px 6px 2px;
}

.billing-service-empty[b-e1ma44u9hu] {
    font-style: italic;
}

.details-shell[b-e1ma44u9hu]  .billing-projection-card {
    margin-bottom: 10px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-info) 3%);
}

.billing-projection-head[b-e1ma44u9hu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.billing-projection-total[b-e1ma44u9hu] {
    text-align: right;
}

.details-shell[b-e1ma44u9hu]  .billing-service-items-surface .mud-table-container {
    border-radius: 8px;
    max-height: min(48vh, 420px);
    overflow-y: auto;
}

.billing-anchor[b-e1ma44u9hu] {
    display: block;
    position: relative;
    top: -76px;
    visibility: hidden;
}

/* Credentials tab (embedded vault panel): the kebab (inline-flex .mud-menu)
   rode a few px higher than the eye/copy buttons (inline-block tooltip
   roots) — normalize all three to one midline. */
.details-shell[b-e1ma44u9hu]  .client-credentials-card td.mud-table-cell > .mud-tooltip-root,
.details-shell[b-e1ma44u9hu]  .client-credentials-card td.mud-table-cell > .mud-menu {
    vertical-align: middle;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
    .client-hero-row[b-e1ma44u9hu] {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 14px;
    }

    .client-hero-actions[b-e1ma44u9hu] {
        width: 100%;
        justify-content: flex-end;
    }

    .details-shell[b-e1ma44u9hu]  .qbr-recommendation {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-metric-value[b-e1ma44u9hu] {
        font-size: 0.875rem;
    }

    .billing-overview-strip[b-e1ma44u9hu] {
        padding: 8px;
    }

    .billing-contract-toolbar[b-e1ma44u9hu] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .billing-contract-search[b-e1ma44u9hu] {
        min-width: 0;
    }

    .billing-contract-layout[b-e1ma44u9hu] {
        grid-template-columns: 1fr;
    }

    .billing-contract-list-pane[b-e1ma44u9hu] {
        max-height: min(44vh, 420px);
        position: static;
    }

    .billing-contract-detail-header[b-e1ma44u9hu] {
        flex-direction: column;
        align-items: flex-start;
        top: 0;
        z-index: 2;
    }

    .billing-contract-detail-actions[b-e1ma44u9hu] {
        justify-content: flex-start;
    }

    .details-shell[b-e1ma44u9hu]  .billing-table-wrap .mud-table-cell {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 700px) {
    .billing-health-list[b-e1ma44u9hu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-health-item[b-e1ma44u9hu] {
        min-height: 0;
    }
}

@media (max-width: 599.98px) {
    .client-hero-title[b-e1ma44u9hu] {
        flex-wrap: wrap;
    }

    .client-name[b-e1ma44u9hu] {
        flex: 1 1 140px;
    }

    /* Contacts: MudDataGrid stacks cells into cards below 600px and the
       actions cell landed as an orphan row at each record's foot. Pin the
       kebab beside the contact identity — same pattern as Clients/List. */
    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row {
        position: relative;
    }

    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row > .mud-table-cell[data-label="Name"] {
        padding-right: 60px !important;
    }

    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row > .mud-table-cell:last-child {
        position: absolute !important;
        top: 2px;
        right: 8px;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        z-index: 2;
    }

    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row > .mud-table-cell:last-child > div,
    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row > .mud-table-cell:last-child .mud-menu,
    .details-shell[b-e1ma44u9hu]  .contacts-grid .mud-table-body .mud-table-row > .mud-table-cell:last-child .mud-icon-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center;
        justify-content: center;
    }
}
/* /Components/Pages/Clients/List.razor.rz.scp.css */
/* Clients list — scoped under .clients-page (see UI_STYLE_GUIDE.md).
   Mirrors the Service Desk aesthetic: hairline borders, soft tints,
   14px surfaces, sentence-case controls. */

/* (.command-bar, .grid-cell-primary, .clickable-row come from app.css) */

/* Client avatar — identical shape/colors to the Service Desk list. */
.clients-page[b-khi3oaqukg]  .client-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.client-avatar--initials[b-khi3oaqukg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #fff;
    background: var(--client-avatar-bg, var(--mud-palette-primary));
}

.client-identity-copy[b-khi3oaqukg] {
    min-width: 0;
}

@media (max-width: 600px) {
    /* MudDataGrid stacks into cards below 600px (Breakpoint.Xs) and the
       SelectColumn cells render as orphan unlabeled checkbox rows floating
       between cards. Selection is a desktop bulk-action affordance — hide
       the whole column at phone width. :not([colspan]) keeps full-width
       utility cells (NoRecordsContent / loading) visible. */
    .clients-page[b-khi3oaqukg]  .mud-table-head .mud-table-cell:first-child,
    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:first-child:not([colspan]) {
        display: none !important;
    }
}

@media (max-width: 700px) {
    /* MudDataGrid stacks every cell into a card on phones. Its empty actions
       column otherwise lands after Open tickets, leaving the three-dot menu
       detached from the client it controls. Pin it to the identity row. */
    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row {
        position: relative;
    }

    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell[data-label="Client"] {
        padding-right: 60px !important;
    }

    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:last-child {
        position: absolute !important;
        /* The identity row is now the first stacked row (the selection
           checkbox row above it is hidden at phone width). */
        top: 2px;
        right: 8px;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        z-index: 2;
    }

    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:last-child > div,
    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:last-child .mud-menu,
    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:last-child .mud-menu-activator,
    .clients-page[b-khi3oaqukg]  .mud-table-body .mud-table-row > .mud-table-cell:last-child .mud-icon-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center;
        justify-content: center;
    }
}
/* /Components/Pages/Knowledge/Editor.razor.rz.scp.css */
/* Rendered markdown (view mode + preview). The inner HTML comes from
   MarkdownRenderer via MarkupString, so it carries no scope attribute —
   everything below needs ::deep. */
.kb-markdown[b-i6asbtb3yv]  h1,
.kb-markdown[b-i6asbtb3yv]  h2,
.kb-markdown[b-i6asbtb3yv]  h3,
.kb-markdown[b-i6asbtb3yv]  h4 {
    margin: 1.1em 0 0.4em;
    line-height: 1.3;
}

.kb-markdown[b-i6asbtb3yv]  h1:first-child,
.kb-markdown[b-i6asbtb3yv]  h2:first-child,
.kb-markdown[b-i6asbtb3yv]  h3:first-child,
.kb-markdown[b-i6asbtb3yv]  p:first-child {
    margin-top: 0;
}

.kb-markdown[b-i6asbtb3yv]  h1 { font-size: 1.4rem; }
.kb-markdown[b-i6asbtb3yv]  h2 { font-size: 1.2rem; }
.kb-markdown[b-i6asbtb3yv]  h3 { font-size: 1.05rem; }

.kb-markdown[b-i6asbtb3yv]  p,
.kb-markdown[b-i6asbtb3yv]  ul,
.kb-markdown[b-i6asbtb3yv]  ol {
    margin: 0.5em 0;
    line-height: 1.6;
}

.kb-markdown[b-i6asbtb3yv]  ul,
.kb-markdown[b-i6asbtb3yv]  ol {
    padding-inline-start: 1.5em;
}

.kb-markdown[b-i6asbtb3yv]  code {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
}

.kb-markdown[b-i6asbtb3yv]  pre {
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    margin: 0.75em 0;
}

.kb-markdown[b-i6asbtb3yv]  pre code {
    background: none;
    padding: 0;
}

.kb-markdown[b-i6asbtb3yv]  blockquote {
    border-inline-start: 3px solid var(--mud-palette-lines-default);
    margin: 0.75em 0;
    padding: 2px 0 2px 12px;
    color: var(--mud-palette-text-secondary);
}

.kb-markdown[b-i6asbtb3yv]  table {
    border-collapse: collapse;
    margin: 0.75em 0;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.kb-markdown[b-i6asbtb3yv]  th,
.kb-markdown[b-i6asbtb3yv]  td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
}

.kb-markdown[b-i6asbtb3yv]  a {
    color: var(--mud-palette-primary);
}

.kb-markdown[b-i6asbtb3yv]  hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1em 0;
}

.kb-markdown[b-i6asbtb3yv]  img {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    margin: 0.5em 0;
    cursor: zoom-in; /* click opens the lightbox (js/lightbox.js) */
}

/* An unsized screenshot shouldn't swallow the page — cap it and let the
   lightbox carry full size. An explicit ![alt|400](…) width wins. */
.kb-markdown[b-i6asbtb3yv]  img:not([width]) {
    max-height: 520px;
}

/* Edit mode: a document editor, top to bottom — title, one row of
   classification, tags, then the content pane full-width. */
.kb-edit[b-i6asbtb3yv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-edit-meta[b-i6asbtb3yv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 16px;
    align-items: center;
}

.kb-edit-tags[b-i6asbtb3yv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.kb-edit-tags .kb-tag-wrap[b-i6asbtb3yv] {
    flex: 0 1 300px;
    min-width: 220px;
}

/* Pinned rides the far end of the tags row — one band, no orphan column. */
.kb-edit-tags .kb-edit-pin[b-i6asbtb3yv] {
    margin-left: auto;
}

.kb-edit[b-i6asbtb3yv]  .kb-edit-tip {
    margin-top: -6px; /* hugs the Content toolbar it explains */
}

/* Markdown source editor */
.kb-editor[b-i6asbtb3yv]  textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Split mode: write on the left, live render on the right. Stretch keeps
   both pane bottoms on one line (the preview otherwise stopped ~85px short
   of the editor); the sticky cap still bounds it on very long documents. */
.kb-split[b-i6asbtb3yv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.kb-split[b-i6asbtb3yv]  .kb-split-preview {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    min-height: 320px;
}

@media (max-width: 960px) {
    .kb-split[b-i6asbtb3yv] {
        grid-template-columns: 1fr;
    }
}

/* The active Write/Split/Preview segment wears the app's copper-tinted
   pill — the outlined group alone gives no visible selected state. The
   button root is Mud-rendered, so route through the page's own .kb-edit. */
.kb-edit[b-i6asbtb3yv]  .kb-pane-active {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 86%);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* View-mode header: five actions squeeze the H1 into a sliver at tablet
   widths. Labels never wrap mid-button, and below 960px the header stacks
   title-then-actions (app.css only does this under 700px). */
.page-shell[b-i6asbtb3yv]  .page-header-actions .mud-button-root {
    white-space: nowrap;
}

@media (max-width: 960px) {
    .page-shell[b-i6asbtb3yv]  .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-shell[b-i6asbtb3yv]  .page-header-actions {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Knowledge/List.razor.rz.scp.css */
.kb-row[b-uzsjlp21mo] {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.kb-row:first-of-type[b-uzsjlp21mo] {
    border-top: none;
}

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

.kb-document-row[b-uzsjlp21mo] {
    padding: 10px 16px;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* The pin gutter is reserved on EVERY row (empty span on unpinned ones)
   so titles share one left edge whether pinned or not. */
.kb-doc-pin[b-uzsjlp21mo] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 20px;
}

.kb-doc-main[b-uzsjlp21mo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.kb-doc-titleline[b-uzsjlp21mo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* The updated date lives in a fixed right-aligned metadata slot instead of
   floating inline after the title + chip at a varying x. */
.kb-doc-updated[b-uzsjlp21mo] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.kb-document-row:focus-visible[b-uzsjlp21mo] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* UX-01: SOP/template rows are keyboard buttons — show where focus is. */
.kb-row-main[b-uzsjlp21mo] {
    flex: 1;
    min-width: 0;
    padding: 10px 8px 10px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kb-row-main:focus-visible[b-uzsjlp21mo] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.kb-row[b-uzsjlp21mo]  > .mud-menu {
    flex: 0 0 auto;
    margin-right: 8px;
}

/* SOP and service templates are operational records, not article cards.
   Give them stable columns on larger screens and let MudTable turn each row
   into a labelled card on phones. */
.template-toolbar[b-uzsjlp21mo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.template-toolbar[b-uzsjlp21mo]  .mud-input-control {
    width: min(360px, 100%);
}

.template-table-shell[b-uzsjlp21mo] {
    overflow: hidden;
}

.template-table[b-uzsjlp21mo]  .mud-table-container {
    overflow-x: auto;
}

.template-table[b-uzsjlp21mo]  .mud-table-head .mud-table-cell {
    padding: 10px 14px;
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-cell {
    padding: 11px 14px;
    vertical-align: middle;
}

.template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.template-name-button[b-uzsjlp21mo] {
    display: flex;
    flex-direction: column;
    /* MudBlazor's global button reset sets align-items/justify-content to
       center, which floated the short template name to the middle of this
       column flex — pin both back to the start. */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 210px;
    max-width: 440px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.template-name-button:focus-visible[b-uzsjlp21mo] {
    border-radius: 4px;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.template-name[b-uzsjlp21mo] {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.35;
}

.template-description[b-uzsjlp21mo],
.template-cell-secondary[b-uzsjlp21mo],
.template-tags[b-uzsjlp21mo] {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.template-description[b-uzsjlp21mo] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.template-cell-primary[b-uzsjlp21mo] {
    display: block;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.35;
}

.template-defaults[b-uzsjlp21mo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.template-tags[b-uzsjlp21mo] {
    max-width: 180px;
    overflow-wrap: anywhere;
}

/* "Jul 13, 2026" reads as one token — never two lines. */
.template-updated[b-uzsjlp21mo] {
    white-space: nowrap;
}

.template-actions-cell[b-uzsjlp21mo] {
    width: 56px;
    text-align: right;
}

.visually-hidden[b-uzsjlp21mo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .template-toolbar[b-uzsjlp21mo] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .template-toolbar[b-uzsjlp21mo]  .mud-input-control {
        width: 100%;
    }

    .template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-row {
        position: relative;
        margin-bottom: 12px;
        padding: 8px 54px 8px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        background: var(--mud-palette-surface);
    }

    .template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-cell {
        min-height: 36px;
        padding: 7px 0 7px 104px;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 50%);
    }

    .template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-cell::before {
        width: 94px;
        color: var(--mud-palette-text-secondary);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-cell:first-child {
        padding-left: 0;
    }

    .template-table[b-uzsjlp21mo]  .mud-table-body .mud-table-cell:first-child::before,
    .template-table[b-uzsjlp21mo]  .mud-table-body .template-actions-cell::before {
        display: none;
    }

    .template-name-button[b-uzsjlp21mo] {
        min-width: 0;
        max-width: none;
        padding-right: 4px;
    }

    .template-actions-cell[b-uzsjlp21mo] {
        position: absolute;
        top: 8px;
        right: 6px;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .template-tags[b-uzsjlp21mo] {
        max-width: none;
    }
}
/* /Components/Pages/Portal/Invoices/Details.razor.rz.scp.css */
/* Phone: four columns squeeze Description to a word per line — keep the
   table at a readable width and let it scroll sideways instead, with a
   right-edge fade hinting at the hidden columns. Base table styles live in
   app.css (.portal-invoice-table-wrap owns the overflow-x scrolling). */
@media (max-width: 600px) {
    .portal-invoice-scroll[b-j6q4klwfp6] {
        position: relative;
    }

    .portal-invoice-scroll[b-j6q4klwfp6]::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        background: linear-gradient(to left,
            var(--mud-palette-surface),
            color-mix(in srgb, var(--mud-palette-surface) 0%, transparent));
    }

    .portal-invoice-table[b-j6q4klwfp6] {
        min-width: 520px;
    }
}
/* /Components/Pages/Portal/Invoices/List.razor.rz.scp.css */
/* Invoice rows — base row styles live in app.css (.portal-ticket-row).
   Desktop: the amount sits last in a fixed-width, right-aligned slot so the
   money scans vertically no matter how wide the status chip is. */
.portal-invoice-number[b-95143k3f1w] {
    white-space: nowrap;
}

.portal-invoice-amount[b-95143k3f1w] {
    flex: 0 0 auto;
    min-width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.portal-invoice-row[b-95143k3f1w]  .mud-chip {
    margin: 0;
}

/* Phone: three-across squeezes the number into mid-token wraps — stack into
   number+status, then dates (inside the main block), then the amount. */
@media (max-width: 600px) {
    .portal-invoice-row[b-95143k3f1w] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        row-gap: 6px;
    }

    .portal-invoice-row .portal-ticket-main[b-95143k3f1w] {
        grid-column: 1;
        grid-row: 1;
    }

    .portal-invoice-row[b-95143k3f1w]  .mud-chip {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .portal-invoice-amount[b-95143k3f1w] {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        text-align: left;
    }
}
/* /Components/Pages/Portal/Kb/List.razor.rz.scp.css */
/* Phone: the one-line meta beside the title compresses the title to ~90px —
   wrap the meta onto its own line under the title, aligned past the icon.
   Base row styles live in app.css (.portal-kb-row is a flex row). */
@media (max-width: 600px) {
    .portal-kb-row[b-u9k6rmgas4] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .portal-kb-meta[b-u9k6rmgas4] {
        flex-basis: 100%;
        margin-left: 30px; /* icon (20px) + row gap (10px) */
    }
}
/* /Components/Pages/Portal/PortalTokenFailureCard.razor.rz.scp.css */
/* One width and one top gap for every token-failure card, so share/csat/
   sign/verify failures read as the same state instead of four ad-hoc pages. */
.portal-fail-wrap[b-w3seuarlbo] {
    max-width: 560px;
    margin: clamp(28px, 7vh, 64px) auto 0;
}
/* /Components/Pages/Portal/Tickets/Details.razor.rz.scp.css */
/* The subject IS the page title — on narrow screens let it wrap (2 lines at
   tablet, 3 at phone) instead of vanishing behind a single-line ellipsis.
   Base chat styles live in app.css; desktop keeps the one-line topbar. */
@media (max-width: 960px) {
    .portal-chat-title[b-gmzm6dz9ec] {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    .portal-chat-title[b-gmzm6dz9ec] {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}
/* /Components/Pages/Portal/Tickets/List.razor.rz.scp.css */
/* Phone: the status chip ("Waiting for your reply") beside the title leaves
   the words ~45% of the row — stack the chip under the title block so the
   title gets the full width. Base row styles live in app.css. */
@media (max-width: 600px) {
    .portal-ticket-row[b-qtfikp72s8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Column direction + flex-start sizes children to CONTENT width — the
       nowrap snippet (max-width 60ch ≈ 573px) pushed the whole page wide
       at 390px. Pin the text block to the row's width. */
    .portal-ticket-main[b-qtfikp72s8] {
        width: 100%;
    }

    .portal-ticket-main .portal-ticket-snippet[b-qtfikp72s8] {
        max-width: 100%;
    }

    .portal-ticket-row[b-qtfikp72s8]  .mud-chip {
        margin: 0;
    }
}
/* /Components/Pages/Reports/TimeTruth.razor.rz.scp.css */
/* .cw-num-cell alignment, the tablet .stat-grid 2×2, and the
   .report-table scroll-fade pattern all live in wwwroot/css/app.css —
   they're shared report grammar, not page styling. */

/* The no-cost-rate flag sits inline on the tech's name line. */
.tt-tech-name[b-av3guzjdl7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* /Components/Pages/Sales/AgreementEditor.razor.rz.scp.css */
/* The Effective date + Renews on row. `.agreement-dates-row` is a plain div
   rendered by this page, so it carries the isolation attribute; the Mud
   pickers inside are reached through ::deep (see UI_STYLE_GUIDE.md). */

.agreement-dates-row[b-3oreo974su] {
    display: flex;
    gap: 8px;
}

.agreement-dates-row[b-3oreo974su]  .mud-picker {
    flex: 1;
    min-width: 0;
}

/* Keep the resting label clear of the calendar adornment: MudBlazor's own
   .mud-input-label already ellipsizes at max-width:100%, but 100% runs under
   the end-adornment icon — reserve that slot. MudBlazor's shrink rules carry
   higher specificity, so the floated label keeps its full width. */
.agreement-dates-row[b-3oreo974su]  .mud-input-label {
    max-width: calc(100% - 56px);
}
/* /Components/Pages/Sales/AgreementsList.razor.rz.scp.css */
/* Scoped under the page's own `.agreements-page` wrapper div where the class
   sits on a Mud component (which never receives the isolation attribute);
   plain-HTML selectors like `.agreement-title` are stamped directly.
   See UI_STYLE_GUIDE.md — "MudBlazor + CSS isolation — THE RULE". */

/* Header actions: buttons never break their own label across lines — when
   the header is squeezed (768) they wrap as whole buttons instead. */
.agreements-page[b-vakw75v8ch]  .agreements-header-actions .mud-button-root {
    white-space: nowrap;
}

/* Grid dates ("Jan 1, 2026") read as one unit; the title column absorbs
   the squeeze instead. */
.agreements-page[b-vakw75v8ch]  .agreement-date {
    white-space: nowrap;
}

/* Titles clamp to two lines so narrow grids keep a calm row rhythm. */
.agreement-title[b-vakw75v8ch] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Pages/Sales/QuoteBuilder.razor.rz.scp.css */
/* The Title + "Valid until" headline row. `.quote-headline-row` is a plain
   div rendered by this page, so it carries the isolation attribute; the Mud
   inputs inside are reached through ::deep (see UI_STYLE_GUIDE.md). */

.quote-headline-row[b-cpml7bn6fc] {
    display: flex;
    gap: 8px;
}

.quote-headline-row[b-cpml7bn6fc]  .quote-title-field {
    flex: 1;
    min-width: 0;
}

.quote-headline-row[b-cpml7bn6fc]  .quote-valid-until {
    flex: 0 0 180px;
}

/* Phones: stack the pair so the date value never clips mid-glyph. */
@media (max-width: 600px) {
    .quote-headline-row[b-cpml7bn6fc] {
        flex-direction: column;
    }

    .quote-headline-row[b-cpml7bn6fc]  .quote-valid-until {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Sales/QuotesList.razor.rz.scp.css */
/* CSS isolation: every class below sits on a MudBlazor child component
   (MudPaper, MudTable, MudAutocomplete, MudTd), which never receives this
   file's scope attribute — so each rule is keyed off the page's own
   `.quotes-page` wrapper div and reaches the Mud markup through ::deep
   (the Tickets `.service-desk` pattern). A selector that STARTS at a Mud
   component's class matches nothing; see UI_STYLE_GUIDE.md. */

.quotes-page[b-96crj1pmxt]  .quote-section {
    padding: 24px;
}

.quotes-page[b-96crj1pmxt]  .quote-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.quotes-page[b-96crj1pmxt]  .quote-client-filter {
    width: min(280px, 100%);
}

/* Tablet band: floor the 7-column table so the report-table wrapper
   (class on the MudTable root) scrolls it with the fade affordance
   instead of truncating the SENT column at the card edge. */
@media (min-width: 601px) and (max-width: 959.98px) {
    .quotes-page[b-96crj1pmxt]  .quote-table.report-table {
        --cw-table-min: 880px;
    }
}

.quotes-page[b-96crj1pmxt]  .quote-table .mud-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.quotes-page[b-96crj1pmxt]  .quote-table .mud-table-head .mud-table-cell {
    padding: 10px 14px;
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell {
    padding: 10px 14px;
    vertical-align: middle;
}

.quotes-page[b-96crj1pmxt]  .quote-number,
.quotes-page[b-96crj1pmxt]  .quote-title,
.quotes-page[b-96crj1pmxt]  .quote-total,
.quotes-page[b-96crj1pmxt]  .quote-monthly,
.quotes-page[b-96crj1pmxt]  .quote-date {
    display: block;
}

.quotes-page[b-96crj1pmxt]  .quote-number,
.quotes-page[b-96crj1pmxt]  .quote-total {
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.quotes-page[b-96crj1pmxt]  .quote-title {
    max-width: 36ch;
    margin-top: 2px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotes-page[b-96crj1pmxt]  .quote-monthly,
.quotes-page[b-96crj1pmxt]  .quote-date {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quotes-page[b-96crj1pmxt]  .quote-actions {
    width: 72px;
    text-align: right;
}

.quotes-page[b-96crj1pmxt]  .quote-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 16px;
    text-align: center;
}

.quotes-page[b-96crj1pmxt]  .visually-hidden {
    position: absolute;
    /* Pin to the page origin: with no positioned ancestor, the span's
       static position inside the horizontally-scrolled table (x≈913 at
       768px) counted toward document scrollWidth and gave every quotes
       viewport a phantom sideways scroll. */
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .quotes-page[b-96crj1pmxt]  .quote-section {
        padding: 16px;
    }

    .quotes-page[b-96crj1pmxt]  .quote-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .quotes-page[b-96crj1pmxt]  .quote-client-filter {
        width: 100%;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-container {
        overflow: visible;
        border: 0;
    }

    /* Stacked rows keep table-row display by default, so the card padding
       and borders below inflate the table's min-content 9px past the page.
       Block-ify the chain (the Team roster's stacked pattern) so the row
       chrome stays inside the container width. */
    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-root,
    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body {
        display: block;
        width: 100%;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-row {
        display: block;
        box-sizing: border-box;
        margin-bottom: 12px;
        padding: 8px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        background: var(--mud-palette-surface);
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell {
        min-height: 38px;
        padding: 8px 0 8px 100px;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 50%);
        /* Wide values (total + "+$N/mo") wrap under the label instead of
           bleeding past the card border; IDs stay whole. */
        flex-wrap: wrap;
        min-width: 0;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell > * {
        max-width: 100%;
    }

    .quotes-page[b-96crj1pmxt]  .quote-number,
    .quotes-page[b-96crj1pmxt]  .quote-monthly {
        white-space: nowrap;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell::before {
        width: 90px;
        color: var(--mud-palette-text-secondary);
        /* The stacked data-label stays in the UI face even inside the mono
           Total cell (td.cw-num-cell) — labels are prose, values are data. */
        font-family: var(--mud-typography-default-family);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell:first-child {
        padding-left: 0;
    }

    .quotes-page[b-96crj1pmxt]  .quote-table .mud-table-body .mud-table-cell:first-child::before {
        display: none;
    }

    .quotes-page[b-96crj1pmxt]  .quote-title {
        max-width: none;
        white-space: normal;
    }

    .quotes-page[b-96crj1pmxt]  .quote-actions {
        width: auto;
        justify-content: flex-end !important;
        border-bottom: 0 !important;
    }
}
/* /Components/Pages/Settings/Ai.razor.rz.scp.css */
/* Provider meta line: keep the "last checked" timestamp whole when the
   caption wraps at narrow widths (it was breaking mid-date). */
.ai-checked-at[b-qnuop9n3gu] {
    white-space: nowrap;
}

/* Usage table: below 600px the five columns were crushing into 3-line
   wraps and "Est. cost" was clipped off entirely. Keep natural column
   widths and scroll sideways inside the card instead; a right-edge fade
   hints that there is more table to the right. */
.ai-usage-tablewrap[b-qnuop9n3gu] {
    position: relative;
}

@media (max-width: 600px) {
    .ai-usage-scroll[b-qnuop9n3gu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ai-usage-scroll[b-qnuop9n3gu]  table {
        min-width: 560px;
    }

    .ai-usage-tablewrap[b-qnuop9n3gu]::after {
        content: "";
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 28px;
        border-radius: 0 14px 14px 0;
        background: linear-gradient(to right, transparent, var(--mud-palette-surface));
        pointer-events: none;
    }
}
/* /Components/Pages/Settings/CalendarConnections.razor.rz.scp.css */
/* Base layout for .cal-conn-row / .cal-conn-main / .cal-conn-title lives in
   app.css. This file only fixes the phone reflow: below 600px the status chip
   was overflowing the shrunken title column underneath the row's action
   button. Wrap the row so the action drops to its own right-aligned line. */

.cal-conn-action[b-b4z49jnljb] {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .cal-conn-row[b-b4z49jnljb] {
        flex-wrap: wrap;
    }

    .cal-conn-main[b-b4z49jnljb] {
        flex: 1 1 100%;
    }

    .cal-conn-title[b-b4z49jnljb] {
        flex-wrap: wrap;
    }

    .cal-conn-action[b-b4z49jnljb] {
        flex: 1 1 100%;
        display: flex;
        justify-content: flex-end;
    }
}
/* /Components/Pages/Settings/ConnectM365Wizard.razor.rz.scp.css */
.wizard-steps-list[b-fqjjitwrxa] {
    margin: 0;
    padding-left: 1.2rem;
}

.wizard-steps-list li[b-fqjjitwrxa] {
    margin: 2px 0;
}

.wizard-script-block[b-fqjjitwrxa] {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
}

.wizard-script-block pre[b-fqjjitwrxa] {
    margin: 0 0 8px 0;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Settings/Email.razor.rz.scp.css */
.mailbox-card--inactive[b-pe238bjsm9] {
    opacity: 0.65;
}

/* One queued/skipped item per row, separated by hairlines */
.delivery-row[b-pe238bjsm9] {
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.delivery-row:first-of-type[b-pe238bjsm9] {
    border-top: none;
}

.text-truncate[b-pe238bjsm9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}
/* /Components/Pages/Settings/Index.razor.rz.scp.css */
/* Cards in the same grid row read as one row: stretch the row and let
   every card fill its cell so short descriptions don't leave ragged
   bottoms next to two-line neighbors. */
.settings-index-cards[b-2x73d5sfqn]  .mud-grid {
    align-items: stretch;
}

.settings-index-cards[b-2x73d5sfqn]  .mud-grid-item > .mud-card {
    height: 100%;
}
/* /Components/Pages/Settings/Intake.razor.rz.scp.css */
/* One rule/source per row, separated by hairlines (matches Email page) */
.delivery-row[b-ihtqegm30t] {
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.delivery-row:first-of-type[b-ihtqegm30t] {
    border-top: none;
}

/* ── "How intake works" flow diagram ─────────────────────────────────── */
.intake-flow[b-ihtqegm30t] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.intake-flow__node[b-ihtqegm30t] {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 12px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
}

.intake-flow__icons[b-ihtqegm30t] {
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
    color: var(--mud-palette-primary);
}

.intake-flow__label[b-ihtqegm30t] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

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

.intake-flow[b-ihtqegm30t]  .intake-flow__arrow {
    align-self: center;
    color: var(--mud-palette-text-disabled);
    flex: 0 0 auto;
}

/* Below the app's narrow breakpoint the arrows point down instead of across */
@media (max-width: 599px) {
    .intake-flow[b-ihtqegm30t] {
        flex-direction: column;
    }

    /* In column direction the 140px flex-basis becomes a HEIGHT, leaving
       ~60px of dead space per card — let each node fit its content. */
    .intake-flow__node[b-ihtqegm30t] {
        flex: 0 0 auto;
    }

    .intake-flow[b-ihtqegm30t]  .intake-flow__arrow {
        transform: rotate(90deg);
    }
}

/* ── Rule ordering control (rank number between up/down) ─────────────── */
.rule-rank[b-ihtqegm30t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 2px 0;
}

.rule-rank__num[b-ihtqegm30t] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    padding: 1px 0;
}

.rule-rank[b-ihtqegm30t]  .rule-rank__btn {
    padding: 2px;
}

/* Small "When / Then" lead-in labels on a rule's description lines */
.intake-cond[b-ihtqegm30t] {
    display: inline-block;
    min-width: 2.6em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-disabled);
}

/* ── Webhook URL field: truncates cleanly, actions pinned at the end ─── */
.webhook-url[b-ihtqegm30t] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.webhook-url__text[b-ihtqegm30t] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.webhook-url__actions[b-ihtqegm30t] {
    flex: 0 0 auto;
    display: flex;
}

/* ── Example payload, shown once under the sources ──────────────────── */
.payload-ref[b-ihtqegm30t] {
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.payload-ref__label[b-ihtqegm30t] {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.payload-ref__code[b-ihtqegm30t] {
    margin: 0;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--mud-palette-text-primary);
}

/* ── Empty states ───────────────────────────────────────────────────── */
.intake-empty[b-ihtqegm30t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 24px 16px;
}

.intake-empty[b-ihtqegm30t]  .intake-empty__icon {
    color: var(--mud-palette-text-disabled);
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}
/* /Components/Pages/Settings/Integrations/Catalog.razor.rz.scp.css */
/* The feature strip's app.css layout is flex with grow, which made tile
   widths jump between rows (an orphan tile stretched full width). A
   fixed-basis wrapping grid keeps every tile the same width; gap and
   margin still come from the app.css rule. */
.integration-feature-strip[b-fl0sduraoc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* /Components/Pages/Settings/Integrations/GoogleWorkspace.razor.rz.scp.css */
/* "What this powers" rows: icon + link + em-dash description on one line
   (replacing the d-flex utilities). Below 600px the description drops to
   its own full-width line so labels stop breaking mid-word and the
   descriptions share one left edge. Kept in sync with
   Microsoft365.razor.css. */

.powers-list[b-ca27cdldnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.powers-item[b-ca27cdldnr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 600px) {
    .powers-item[b-ca27cdldnr] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .powers-item[b-ca27cdldnr]  .mud-typography-body2 {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Settings/Integrations/LevelWorkspace.razor.rz.scp.css */
/* Most Level workspace styling is global (app.css, .level-*). This file
   only equalizes the Overview tab's Connection/Webhook/Mappings cards:
   the markup previously relied on an `h-100` utility class that exists
   in neither MudBlazor 9 nor app.css, so the cards sat at content
   height. Making each grid item a flex container stretches the card to
   the row height MudGrid already gives the items. */

.level-overview-cards[b-n2zt6panm8]  .mud-grid-item {
    display: flex;
}

.level-overview-cards[b-n2zt6panm8]  .mud-grid-item > .mud-paper {
    width: 100%;
}
/* /Components/Pages/Settings/Integrations/Microsoft365.razor.rz.scp.css */
/* "What this powers" rows: icon + link + em-dash description on one line
   (replacing the d-flex utilities). Below 600px the description drops to
   its own full-width line so labels stop breaking mid-word and the
   descriptions share one left edge. Kept in sync with
   GoogleWorkspace.razor.css. */

.powers-list[b-wn14pf6brl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.powers-item[b-wn14pf6brl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 600px) {
    .powers-item[b-wn14pf6brl] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .powers-item[b-wn14pf6brl]  .mud-typography-body2 {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Settings/Ops.razor.rz.scp.css */
/* Both ops tables sit flush inside a surface-card, so instead of wrapping
   them in the global .data-grid-container (which would double-border the
   card) we mirror its head/row/hover values here — same numbers as app.css. */

.ops-table[b-5vqxjpod5b]  thead th {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%) !important;
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%) !important;
}

.ops-table[b-5vqxjpod5b]  tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

.ops-table[b-5vqxjpod5b]  tbody tr:hover td {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 18%);
}

/* Phone: three columns can't share 390px (Cadence clips mid-word, "What"
   wraps letter-per-line), so each row stacks: headline line first, the
   remaining cells flow beneath it. */
@media (max-width: 600px) {
    .ops-table[b-5vqxjpod5b]  table,
    .ops-table[b-5vqxjpod5b]  tbody {
        display: block;
        width: 100%;
    }

    .ops-table[b-5vqxjpod5b]  thead {
        display: none;
    }

    .ops-table[b-5vqxjpod5b]  tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
    }

    .ops-table[b-5vqxjpod5b]  tbody td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0;
        border-bottom: 0 !important;
    }

    /* Sweeps: name on its own line, then "last run" chip + cadence. */
    .ops-table--sweeps[b-5vqxjpod5b]  tbody td:first-child {
        flex: 1 1 100%;
        font-weight: 600;
    }

    /* Errors: age + host chip inline, the message gets the full width. */
    .ops-table--errors[b-5vqxjpod5b]  tbody td:last-child {
        flex: 1 1 100%;
        padding-top: 2px;
    }
}
/* /Components/Pages/Settings/PortalAnnouncements.razor.rz.scp.css */
/* Announcement card row: chips + title + meta on the left, action icons on
   the right (mirrors the MudStack layout it replaced). Below 600px the card
   restacks — chips row, then the title on its own full-width line, then body
   and meta, then a right-aligned action row — instead of squeezing the text
   into a sliver beside the icons. */

.pa-row[b-lt979ce2zu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pa-main[b-lt979ce2zu] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pa-head[b-lt979ce2zu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 4px;
}

.pa-title[b-lt979ce2zu] {
    min-width: 0;
}

.pa-actions[b-lt979ce2zu] {
    display: flex;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .pa-row[b-lt979ce2zu] {
        flex-direction: column;
        align-items: stretch;
    }

    /* In column direction the grow/basis pair would size by free space —
       let the text block take its natural height. */
    .pa-main[b-lt979ce2zu] {
        flex: 0 0 auto;
    }

    /* Chips stay together on the first line; the title takes the next. */
    .pa-title[b-lt979ce2zu] {
        order: 10;
        flex-basis: 100%;
    }

    .pa-actions[b-lt979ce2zu] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/Settings/SettingsShell.razor.rz.scp.css */
/* Settings shell — scoped under .settings-shell (the shell's own root,
   so ::deep reaches into MudBlazor children; see UI_STYLE_GUIDE.md).
   Desktop: sticky side rail. Below md: the rail becomes a horizontal,
   scrollable pill strip so content starts at the top of the page. */

.settings-shell[b-yoa52ej94f]  .settings-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.settings-shell[b-yoa52ej94f]  .settings-nav {
    position: sticky;
    top: 24px;
    /* The settings rail starts below the page heading before it becomes
       sticky. Reserve that initial offset as well as the bottom gutter so a
       short laptop never renders part of the rail below the viewport. */
    max-height: calc(100dvh - 138px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Breathing room so scroll-end never slices a link at the card radius. */
    padding-bottom: 14px;
}

/* Scroll affordance: without it the height-capped rail reads as a
   truncated list ("AI" sliced mid-glyph at 1440×900). The sticky fade
   rides the scroll container's bottom edge; the padding above keeps the
   last link readable beneath it at scroll end. */
.settings-shell[b-yoa52ej94f]  .settings-nav::after {
    content: "";
    position: sticky;
    display: block;
    bottom: 0;
    height: 26px;
    margin-top: -26px;
    background: linear-gradient(to bottom, transparent, var(--mud-palette-surface));
    pointer-events: none;
}

.settings-shell[b-yoa52ej94f]  .settings-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-shell[b-yoa52ej94f]  .settings-nav-label {
    margin: 14px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.settings-shell[b-yoa52ej94f]  .mud-nav-link {
    border-radius: 10px;
    margin: 2px 4px;
}

.settings-shell[b-yoa52ej94f]  .mud-nav-link.active {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .settings-shell[b-yoa52ej94f]  .settings-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav {
        position: sticky;
        top: calc(var(--mud-appbar-min-height, 48px) + 8px);
        z-index: 20;
        max-height: none;
        overflow: visible;
        background: var(--mud-palette-surface);
        padding-bottom: 0;
    }

    /* The desktop rail's bottom fade has no business on the pill strip;
       replace it with a right-edge fade so the strip reads as scrollable
       instead of hard-clipping a pill mid-letter. */
    .settings-shell[b-yoa52ej94f]  .settings-nav::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: 28px;
        margin-top: 0;
        background: linear-gradient(to right, transparent, var(--mud-palette-surface));
        border-radius: 0 14px 14px 0;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-body {
        padding: 6px !important;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-menu {
        display: flex;
        align-items: center;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        /* Keeps the last pill readable beneath the right-edge fade. */
        padding-right: 26px;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-label {
        display: none;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-menu .mud-nav-item {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-menu .mud-nav-link {
        width: auto;
        white-space: nowrap;
        margin: 0;
    }
}

@media (max-width: 600px) {
    .settings-shell[b-yoa52ej94f]  .settings-nav-menu .mud-nav-link {
        min-height: 40px;
        padding: 8px 12px;
    }

    .settings-shell[b-yoa52ej94f]  .settings-nav-menu .mud-nav-link-icon {
        display: none;
    }
}
/* /Components/Pages/Settings/Users/Details.razor.rz.scp.css */
.member-detail-grid[b-bv1q6k1gkl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.member-section[b-bv1q6k1gkl] {
    min-width: 0;
}

.member-section--wide[b-bv1q6k1gkl] {
    grid-column: 1 / -1;
}

.security-methods[b-bv1q6k1gkl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-method-badge[b-bv1q6k1gkl] {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
}

.detail-method-badge--warning[b-bv1q6k1gkl] {
    border-color: color-mix(in oklab, var(--mud-palette-warning), transparent 55%);
    color: var(--mud-palette-warning-darken);
}

.member-action-list[b-bv1q6k1gkl] {
    display: flex;
    flex-direction: column;
}

.member-action-row[b-bv1q6k1gkl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The description shrinks and wraps; action buttons never break mid-word. */
.member-action-row > div:first-child[b-bv1q6k1gkl] {
    min-width: 0;
}

.member-action-row[b-bv1q6k1gkl]  .mud-button-root {
    flex-shrink: 0;
    white-space: nowrap;
}

.member-action-row:first-child[b-bv1q6k1gkl] {
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 900px) {
    .member-detail-grid[b-bv1q6k1gkl] {
        grid-template-columns: 1fr;
    }

    .member-section--wide[b-bv1q6k1gkl] {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .member-action-row[b-bv1q6k1gkl] {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .member-action-row[b-bv1q6k1gkl]  .mud-button-root {
        width: 100%;
    }
}
/* /Components/Pages/Settings/Users/List.razor.rz.scp.css */
.user-command-bar[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.user-search[b-cikd2a6cjb] {
    flex: 1 1 320px;
    min-width: 220px;
}

.user-filters[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-filter[b-cikd2a6cjb] {
    width: 150px;
}

.users-grid[b-cikd2a6cjb] {
    /* The roster is min-content wide; if a width still can't fit it,
       scroll instead of clipping (the global container hides overflow). */
    overflow-x: auto;
}

.users-grid[b-cikd2a6cjb]  .mud-table-head .mud-table-cell {
    white-space: nowrap;
}

/* Tighter cell gutters so all six columns fit inside the card at 768+. */
.users-grid[b-cikd2a6cjb]  .mud-table-root .mud-table-cell {
    padding-inline: 8px;
}

.users-grid[b-cikd2a6cjb]  .mud-table-root .mud-table-cell:first-child {
    padding-inline-start: 16px;
}

.users-grid[b-cikd2a6cjb]  .mud-table-root .mud-table-cell:last-child {
    padding-inline: 4px;
}

.users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

.user-identity[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-avatar[b-cikd2a6cjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-primary), var(--mud-palette-surface) 86%);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.user-identity-copy[b-cikd2a6cjb],
.user-security[b-cikd2a6cjb] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.user-display-name[b-cikd2a6cjb],
.user-role[b-cikd2a6cjb],
.user-last-login[b-cikd2a6cjb] {
    display: block;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.4;
}

.user-login[b-cikd2a6cjb],
.user-email[b-cikd2a6cjb],
.user-cell-secondary[b-cikd2a6cjb] {
    display: block;
    max-width: 28ch;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-copy[b-cikd2a6cjb]  .mud-chip {
    align-self: flex-start;
    height: 22px;
    margin-top: 3px;
}

.signin-badges[b-cikd2a6cjb] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 360px;
}

.signin-badge[b-cikd2a6cjb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.2;
}

.signin-badge--secure[b-cikd2a6cjb] {
    border-color: color-mix(in oklab, var(--mud-palette-success), transparent 55%);
    color: var(--mud-palette-success);
}

.signin-badge--warning[b-cikd2a6cjb] {
    border-color: color-mix(in oklab, var(--mud-palette-warning), transparent 55%);
    color: var(--mud-palette-warning-darken);
}

.signin-badge[b-cikd2a6cjb]  .mud-icon-root {
    font-size: 0.9rem;
}

.team-tabs[b-cikd2a6cjb]  .mud-tabs-panels {
    background: transparent;
}

.invitation-row[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 2px;
}

.invitation-actions[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.team-empty-state[b-cikd2a6cjb] {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.security-state[b-cikd2a6cjb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.security-state--on[b-cikd2a6cjb] {
    color: var(--mud-palette-success);
}

.security-state[b-cikd2a6cjb]  .mud-icon-root {
    font-size: 1rem;
}

.user-status-control[b-cikd2a6cjb] {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.user-empty[b-cikd2a6cjb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
}

@media (max-width: 800px) {
    .user-command-bar[b-cikd2a6cjb] {
        align-items: stretch;
        flex-direction: column;
    }

    .user-search[b-cikd2a6cjb] {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

    .user-filters[b-cikd2a6cjb] {
        width: 100%;
    }

    .user-filter[b-cikd2a6cjb] {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 600px) {
    /* MudBlazor's stacked xs mode keeps <tr> as display:table-row, so row
       padding is ignored and long values spill past the card edge. Block-ify
       the whole chain so the stacked flex cells lay out inside the card. */
    .users-grid[b-cikd2a6cjb]  .mud-table-root,
    .users-grid[b-cikd2a6cjb]  .mud-table-body {
        display: block;
        width: 100%;
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-row {
        position: relative;
        display: block;
        padding: 8px 12px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell {
        min-width: 0;
        min-height: 38px;
        flex-wrap: wrap;
        justify-content: flex-end;
        column-gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 50%);
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell::before {
        flex: 0 0 96px;
        width: 96px;
        margin-right: auto;
        color: var(--mud-palette-text-secondary);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell:first-child {
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 44px; /* keep the identity clear of the chevron */
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell:first-child::before,
    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell:last-child::before {
        display: none;
    }

    /* Last visible stacked cell (the chevron cell is absolute): don't stack
       a faint divider right above the row border. */
    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell:nth-last-child(2) {
        border-bottom: 0;
    }

    .users-grid[b-cikd2a6cjb]  .mud-table-body .mud-table-cell:last-child {
        position: absolute;
        top: 8px;
        right: 6px;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .user-identity[b-cikd2a6cjb] {
        min-width: 0;
    }

    .user-email[b-cikd2a6cjb],
    .user-login[b-cikd2a6cjb],
    .user-cell-secondary[b-cikd2a6cjb] {
        max-width: 100%;
    }

    .signin-badges[b-cikd2a6cjb] {
        max-width: none;
        justify-content: flex-end;
    }

    .invitation-row[b-cikd2a6cjb] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .invitation-actions[b-cikd2a6cjb] {
        width: 100%;
        padding-left: 32px;
    }
}

@media (max-width: 420px) {
    .user-filters[b-cikd2a6cjb] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Components/Pages/Settings/WorkTypesSettings.razor.rz.scp.css */
/* Row action icons stay side by side; the cell never stacks them. */
.wt-actions[b-tmfz1gjmtp] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    white-space: nowrap;
}

/* Color budget: routine delete icons ride the default ink and only turn
   red on hover (the confirm dialog carries the destructive warning). */
.wt-actions[b-tmfz1gjmtp]  .wt-delete:hover {
    color: var(--mud-palette-error);
}
/* /Components/Pages/Tickets/Details.razor.rz.scp.css */
.ticket-detail[b-ryi0tmd92y] {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

.ticket-breadcrumb[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

.ticket-breadcrumb-sep[b-ryi0tmd92y] {
    opacity: 0.7;
    padding: 0 2px;
}

.ticket-breadcrumb-id[b-ryi0tmd92y] {
    font-family: var(--cw-font-mono);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ticket-group-banner[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
    padding: 9px 12px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-primary), transparent 72%);
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 94%);
}

.ticket-group-banner-copy[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-group-banner-copy[b-ryi0tmd92y]  .mud-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.ticket-detail-grid[b-ryi0tmd92y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 959.98px) {
    .ticket-detail-grid[b-ryi0tmd92y] {
        /* minmax(0, …), not plain 1fr: a bare 1fr track is minmax(auto, 1fr),
           so any wide min-content child expands it past the viewport and the
           whole page scrolls sideways at narrow widths. */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* MudPaper renders outside CSS isolation scope: use ::deep and scope it under a wrapper. */
.ticket-detail[b-ryi0tmd92y]  .ticket-main,
.ticket-detail[b-ryi0tmd92y]  .ticket-side-card {
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

/* Keep buttons in this view human-readable (not all-caps). */
.ticket-detail[b-ryi0tmd92y]  .mud-button-root {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ticket-main-header[b-ryi0tmd92y] {
    padding: 22px 24px 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.ticket-main-header-top[b-ryi0tmd92y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ticket-main-title[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

/* MudText renders outside isolation scope, so target via ::deep */
.ticket-detail[b-ryi0tmd92y]  .ticket-main-subject {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.ticket-main-actions[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* When the subject squeezes the cluster, whole buttons flow to the next
       row — a label must never break in two with an orphaned icon. */
    flex-wrap: wrap;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-main-actions .mud-button-root {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-main-actions .mud-button-root:hover {
    color: var(--mud-palette-text-primary);
}

.ticket-main-meta[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* SLA chip next to the status chip (Phase 7.4) — absent when healthy */
.ticket-sla-chip[b-ryi0tmd92y] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.ticket-sla-chip--warn[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-warning), transparent 86%);
    border-color: color-mix(in oklab, var(--mud-palette-warning), transparent 70%);
    color: color-mix(in oklab, var(--mud-palette-warning), black 22%);
}

.ticket-sla-chip--overdue[b-ryi0tmd92y] {
    background: color-mix(in oklab, #DC2626, transparent 88%);
    border-color: color-mix(in oklab, #DC2626, transparent 74%);
    color: #B91C1C;
}

.ticket-dot[b-ryi0tmd92y] {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--mud-palette-text-secondary);
    opacity: 0.45;
}

/* Tabs: keep the mockup's simple underline style */
.ticket-detail[b-ryi0tmd92y]  .ticket-tabs .mud-tabs-tabbar {
    padding: 0 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-tabs .mud-tab {
    min-height: 46px;
    padding: 14px 0;
    margin-right: 22px;
    font-weight: 650;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--mud-palette-text-secondary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-tabs .mud-tab:hover {
    color: var(--mud-palette-text-primary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-tabs .mud-tabs-panels {
    padding: 18px 24px 24px;
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 25%);
}

.ticket-tab-body[b-ryi0tmd92y] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.ticket-empty[b-ryi0tmd92y] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    padding: 10px 0 4px;
}

/* Sidebar */
.ticket-sidebar[b-ryi0tmd92y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-card {
    padding: 14px 16px;
}

/* ::deep so sidebar cards built as child components (Schedule, Phase 10's AI
   summary) share the idiom — same reason .ticket-side-card above is ::deep. */
.ticket-detail[b-ryi0tmd92y]  .ticket-side-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

/* Quick actions (Status / Priority / Assignee) */
.ticket-qa[b-ryi0tmd92y] {
    margin-top: 14px;
}

.ticket-qa-grid[b-ryi0tmd92y] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 40%);
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 55%);
}

/* MudMenu's custom activator wrapper owns the button semantics and focus.
   Give that wrapper a real box instead of leaving a zero-size focus target
   around the visual quick-action field. */
.ticket-qa[b-ryi0tmd92y]  .mud-menu,
.ticket-qa[b-ryi0tmd92y]  .mud-menu-activator {
    display: block;
}

.ticket-qa[b-ryi0tmd92y]  .mud-menu-activator:focus-visible .ticket-qa-field {
    outline: 2px solid color-mix(in oklab, var(--mud-palette-primary), white 55%);
    outline-offset: 2px;
}

.ticket-qa-field[b-ryi0tmd92y] {
    border: none;
    background: transparent;
    padding: 6px 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 10px;
}

.ticket-qa-field:focus-visible[b-ryi0tmd92y] {
    outline: 2px solid color-mix(in oklab, var(--mud-palette-primary), white 55%);
    outline-offset: 2px;
}

.ticket-qa-label[b-ryi0tmd92y] {
    font-size: 0.625rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ticket-qa-value[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.ticket-qa-value>span[b-ryi0tmd92y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-qa-field:hover .ticket-qa-value[b-ryi0tmd92y] {
    color: var(--mud-palette-primary);
}

.ticket-priority-dot[b-ryi0tmd92y] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ticket-priority-color, #6B7280);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ticket-priority-color, #6B7280), transparent 86%);
}

.ticket-assignee-avatar[b-ryi0tmd92y] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    background: color-mix(in oklab, var(--mud-palette-primary), white 78%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 12%);
    flex: 0 0 auto;
}

@media (max-width: 599.98px) {
    .ticket-main-header[b-ryi0tmd92y] {
        padding: 18px 16px 14px;
    }

    .ticket-main-header-top[b-ryi0tmd92y] {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-main-actions[b-ryi0tmd92y] {
        flex-wrap: wrap;
    }

    .ticket-qa-grid[b-ryi0tmd92y] {
        flex-direction: column;
        gap: 12px;
    }

    .ticket-composer-footer[b-ryi0tmd92y] {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-composer-tools[b-ryi0tmd92y],
    .ticket-composer-send[b-ryi0tmd92y] {
        width: 100%;
        min-width: 0;
    }

    .ticket-composer-send[b-ryi0tmd92y] {
        align-items: stretch;
        justify-content: flex-start;
    }

    .ticket-log-chip-group[b-ryi0tmd92y] {
        width: 100%;
        min-width: 0;
    }

    .ticket-log-chip-group[b-ryi0tmd92y] >  .mud-tooltip-root {
        flex: 1;
        min-width: 0;
    }

    .ticket-log-chip-group .ticket-log-chip--main[b-ryi0tmd92y] {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        white-space: normal;
    }

    .ticket-composer-send[b-ryi0tmd92y] >  .mud-tooltip-root {
        width: 100%;
    }

    .ticket-composer-send[b-ryi0tmd92y] >  .mud-tooltip-root .mud-button-root {
        width: 100%;
    }
}

/* Composer */
.ticket-detail[b-ryi0tmd92y]  .ticket-composer {
    padding: 14px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.ticket-composer-tabs[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    /* Phone widths: the three modes flow onto extra rows as whole pills
       (nowrap labels below) instead of wrapping inside a button. */
    flex-wrap: wrap;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    min-height: 32px !important;
    white-space: nowrap;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-tab.mud-button-text {
    color: var(--mud-palette-text-secondary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-tab.mud-button-text:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 25%);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-tab--internal.mud-button-filled {
    background: #F59E0B !important;
    color: #3B2A00 !important;
}

/* Side conversations get their own steel accent (the palette secondary):
   like Internal it is hidden from the client, but unlike Internal it SENDS a
   real email — the modes must never be mistaken for each other at a glance.
   Steel vs the internal note's warm amber keeps them one look apart without
   leaving the Calmwright palette. Surface flips with the theme, so the label
   stays legible on both the dark (light) and light (dark) steel fills. */
.ticket-detail[b-ryi0tmd92y]  .ticket-composer-tab--side.mud-button-filled {
    background: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-surface) !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input {
    margin: 0 !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input .mud-input {
    border-radius: 12px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input .mud-input-outlined-border {
    border-radius: 12px;
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 20%) !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input textarea {
    padding: 12px 12px;
    font-size: 0.875rem;
    line-height: 1.55;
    min-height: 120px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input--internal .mud-input-outlined-border {
    border-color: color-mix(in oklab, #F59E0B, transparent 45%) !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input--internal textarea {
    background: color-mix(in oklab, #F59E0B, transparent 92%);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input--side .mud-input-outlined-border {
    border-color: color-mix(in oklab, var(--mud-palette-secondary), transparent 45%) !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-input--side textarea {
    background: color-mix(in oklab, var(--mud-palette-secondary), transparent 94%);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-send-btn--side {
    background: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-surface) !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-composer-subject {
    margin: 0 0 8px 0 !important;
}

.ticket-composer-thread-label[b-ryi0tmd92y] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 650;
    /* Steel pulled toward the ink so the small text clears 4.5:1 on the
       tinted grounds in both themes. */
    color: color-mix(in oklab, var(--mud-palette-secondary), var(--mud-palette-text-primary) 30%);
    white-space: nowrap;
    overflow: hidden;
    max-width: 260px;
    min-width: 0;
}

/* text-overflow can't ellipsize the anonymous text inside a flex container —
   the subject needs its own shrinkable span or it clips mid-glyph. Shared by
   the composer "Continuing:" label and the timeline thread label. */
.ticket-thread-text[b-ryi0tmd92y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-composer-audience[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    min-height: 32px;
}

.ticket-composer-footer[b-ryi0tmd92y] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ticket-composer-tools[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

/* ── AI triage suggestion (Phase 10.3) ───────────────────────────────── */

.ticket-triage-suggestion[b-ryi0tmd92y] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticket-triage-suggestion-chips[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ticket-triage-suggestion-rationale[b-ryi0tmd92y] {
    font-size: 0.875rem;
    font-style: italic;
}

/* ── AI assists (Phase 10.2) ─────────────────────────────────────────── */

.ticket-ai-draft-panel[b-ryi0tmd92y] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-ai-draft-panel > :first-child[b-ryi0tmd92y] {
    flex: 1;
}

.ticket-ai-text[b-ryi0tmd92y] {
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-ai-steps[b-ryi0tmd92y] {
    margin: 0 0 6px;
    padding-left: 20px;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-composer-send[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ticket-composer-hint[b-ryi0tmd92y] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Timeline filter bar — separates conversation, internal notes, and system log */
.ticket-feed-filters[b-ryi0tmd92y] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter {
    text-transform: none !important;
    font-weight: 650 !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    min-height: 28px !important;
    font-size: 0.75rem !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter.mud-button-text {
    color: var(--mud-palette-text-secondary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter.mud-button-text:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 25%);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter--internal.mud-button-filled {
    background: #F59E0B !important;
    color: #3B2A00 !important;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter .mud-button-label .mud-icon-root {
    font-size: 0.875rem;
}

@media (max-width: 700px) {
    .ticket-detail[b-ryi0tmd92y]  .ticket-feed-filter {
        min-height: 36px !important;
    }
}

/* Timeline feed */
.ticket-feed[b-ryi0tmd92y] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ticket-event[b-ryi0tmd92y] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ticket-event-avatar[b-ryi0tmd92y] {
    flex: 0 0 auto;
    padding-top: 2px;
}

.ticket-event-user-avatar[b-ryi0tmd92y],
.ticket-event-system-icon[b-ryi0tmd92y] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 55%);
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
}

.ticket-event-body[b-ryi0tmd92y] {
    min-width: 0;
    flex: 1;
}

.ticket-event-top[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Long author + chip + subject combinations push the right cluster to
       the next row as a unit — nothing ever overlaps the timestamp. */
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ticket-event-who[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ticket-event-author[b-ryi0tmd92y] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ticket-event-meta[b-ryi0tmd92y] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.ticket-event-images[b-ryi0tmd92y] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ticket-event-image[b-ryi0tmd92y] {
    display: block;
    max-width: 320px;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.ticket-event-image-link:hover .ticket-event-image[b-ryi0tmd92y] {
    border-color: var(--mud-palette-primary);
}

.ticket-event-when[b-ryi0tmd92y] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Right cluster of the event header: per-message actions + timestamp. The
   Forward/Reply action stays muted until the row is hovered so the timeline
   reads calm at rest. */
.ticket-event-top-right[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.ticket-event-top-right[b-ryi0tmd92y]  .ticket-event-action {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.ticket-event:hover .ticket-event-top-right[b-ryi0tmd92y]  .ticket-event-action,
.ticket-event-top-right[b-ryi0tmd92y]  .ticket-event-action:focus-visible {
    opacity: 0.7;
}

.ticket-event-top-right[b-ryi0tmd92y]  .ticket-event-action:hover {
    opacity: 1;
}

/* Side-conversation thread label — which vendor thread this bubble belongs
   to. The subject text lives in .ticket-thread-text for a real ellipsis. */
.ticket-event-thread[b-ryi0tmd92y] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--mud-palette-secondary), var(--mud-palette-text-primary) 30%);
    white-space: nowrap;
    overflow: hidden;
    max-width: 220px;
    min-width: 0;
}

.ticket-event-thread[b-ryi0tmd92y]  .mud-icon-root {
    font-size: 0.9rem;
}

/* The @ icon never squashes when the subject shrinks to its ellipsis. */
.ticket-event-thread[b-ryi0tmd92y]  .mud-icon-root,
.ticket-composer-thread-label[b-ryi0tmd92y]  .mud-icon-root {
    flex: 0 0 auto;
}

/* Phone: author + type chip keep the first line with the timestamp; the
   subject/meta wrap to their own full-width, ellipsized line. (Must sit
   after the base .ticket-event-thread/.ticket-event-meta rules — equal
   specificity, so source order decides.) */
@media (max-width: 599.98px) {
    .ticket-event-top[b-ryi0tmd92y] {
        align-items: flex-start;
    }

    .ticket-event-who[b-ryi0tmd92y] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .ticket-event-thread[b-ryi0tmd92y] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .ticket-event-meta[b-ryi0tmd92y] {
        max-width: 100%;
    }
}

.ticket-event-badge[b-ryi0tmd92y] {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in oklab, #F59E0B, transparent 86%);
    color: #7A4B00;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ticket-event-badge--opened[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 85%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 10%);
}

.ticket-event-bubble[b-ryi0tmd92y] {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
    background: var(--mud-palette-surface);
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-event--system .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: transparent;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 65%);
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.ticket-event--internal .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, #F59E0B, transparent 72%);
    border-left: 3px solid color-mix(in oklab, #F59E0B, transparent 30%);
    background: color-mix(in oklab, #F59E0B, transparent 92%);
}

.ticket-event--internal .ticket-event-user-avatar[b-ryi0tmd92y] {
    background: color-mix(in oklab, #F59E0B, white 80%);
    color: #7A4B00;
    border-color: color-mix(in oklab, #F59E0B, transparent 60%);
}

.ticket-event-badge--internal[b-ryi0tmd92y] {
    background: color-mix(in oklab, #F59E0B, transparent 84%);
    color: #7A4B00;
}

/* Side-conversation messages — private like internal notes, but real email to
   an outside party. Cool steel (the palette secondary) keeps them one glance
   apart from amber team notes and copper-tinted customer replies. */
.ticket-event--side .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, var(--mud-palette-secondary), transparent 72%);
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-secondary), transparent 30%);
    background: color-mix(in oklab, var(--mud-palette-secondary), transparent 92%);
}

.ticket-event--side .ticket-event-user-avatar[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-secondary), white 82%);
    color: color-mix(in oklab, var(--mud-palette-secondary), black 12%);
    border-color: color-mix(in oklab, var(--mud-palette-secondary), transparent 60%);
}

.ticket-event-badge--side[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-secondary), transparent 84%);
    color: color-mix(in oklab, var(--mud-palette-secondary), var(--mud-palette-text-primary) 30%);
}

/* Inbound customer reply — reads as "from the other side" */
.ticket-event--inbound .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 78%);
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 94%);
}

.ticket-event--inbound .ticket-event-user-avatar[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-primary), white 78%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 12%);
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 70%);
}

/* Failed outbound reply — surface the delivery failure */
.ticket-event--failed .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, #EF4444, transparent 65%);
    background: color-mix(in oklab, #EF4444, transparent 93%);
}

/* Outbound reply the outbox is still retrying — delayed, not lost */
.ticket-event--retrying .ticket-event-bubble[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, #F59E0B, transparent 65%);
    background: color-mix(in oklab, #F59E0B, transparent 94%);
}

/* Autoresponder (out-of-office/bounce) — recorded but visually de-emphasized */
.ticket-event--auto .ticket-event-bubble[b-ryi0tmd92y] {
    border-style: dashed;
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 45%);
    color: var(--mud-palette-text-secondary);
}

.ticket-event-badge--customer[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 85%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 10%);
}

.ticket-event-badge--reply[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 86%);
    color: var(--mud-palette-text-secondary);
}

.ticket-event-badge--failed[b-ryi0tmd92y] {
    background: color-mix(in oklab, #EF4444, transparent 84%);
    color: color-mix(in oklab, #DC2626, black 8%);
}

.ticket-event-badge--retrying[b-ryi0tmd92y] {
    background: color-mix(in oklab, #F59E0B, transparent 84%);
    color: color-mix(in oklab, #B45309, black 8%);
}

.ticket-event-badge--auto[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 86%);
    color: var(--mud-palette-text-secondary);
}

/* Attachment chips — shared by the timeline and the composer pending list */
.ticket-event-attachments[b-ryi0tmd92y],
.ticket-composer-attachments[b-ryi0tmd92y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ticket-composer-attachments[b-ryi0tmd92y] {
    padding: 0 12px;
}

.ticket-attachment-chip[b-ryi0tmd92y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 20%);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    text-decoration: none;
    max-width: 100%;
}

a.ticket-attachment-chip:hover[b-ryi0tmd92y] {
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 55%);
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 95%);
}

.ticket-attachment-name[b-ryi0tmd92y] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.ticket-attachment-size[b-ryi0tmd92y] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ticket-attachment-remove[b-ryi0tmd92y] {
    margin: -4px -6px -4px 0;
}

/* Resolution callout — surfaces the captured resolution summary */
.ticket-resolution[b-ryi0tmd92y] {
    border: 1px solid color-mix(in oklab, #22C55E, transparent 65%);
    background: color-mix(in oklab, #22C55E, transparent 92%);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.ticket-resolution-head[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: color-mix(in oklab, #16A34A, black 12%);
}

.ticket-resolution-title[b-ryi0tmd92y] {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ticket-resolution-when[b-ryi0tmd92y] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ticket-resolution-body[b-ryi0tmd92y] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Sidebar content */
.ticket-side-client[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ticket-side-avatar[b-ryi0tmd92y] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
    background: color-mix(in oklab, var(--mud-palette-primary), white 72%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 12%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 850;
}

.ticket-side-avatar img[b-ryi0tmd92y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-side-client-meta[b-ryi0tmd92y] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ticket-side-sub[b-ryi0tmd92y]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ticket-status-dot, #22C55E);
    opacity: 0.9;
}

.ticket-side-actions[b-ryi0tmd92y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ticket-side-actions> :only-child[b-ryi0tmd92y] {
    grid-column: 1 / -1;
}

.ticket-side-person[b-ryi0tmd92y] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.ticket-side-person-avatar[b-ryi0tmd92y] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    background: color-mix(in oklab, var(--mud-palette-secondary), white 82%);
    color: color-mix(in oklab, var(--mud-palette-secondary), black 12%);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
}

.ticket-side-person-name[b-ryi0tmd92y] {
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--mud-palette-text-primary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-link {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-link:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-empty {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ticket-detail[b-ryi0tmd92y]  .ticket-side-title-row .ticket-side-title {
    margin-bottom: 0;
}

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

.ticket-group-list[b-ryi0tmd92y] {
    display: flex;
    flex-direction: column;
}

.ticket-group-row[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

.ticket-group-row:last-child[b-ryi0tmd92y] {
    border-bottom: none;
    padding-bottom: 0;
}

.ticket-group-row-copy[b-ryi0tmd92y] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.ticket-group-row-copy[b-ryi0tmd92y]  .mud-link {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ticket-group-row-copy[b-ryi0tmd92y]  .mud-chip {
    margin-top: 3px;
}

.ticket-tags[b-ryi0tmd92y] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ticket-asset-top[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ticket-asset-name[b-ryi0tmd92y] {
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-asset-badge[b-ryi0tmd92y] {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ticket-asset-badge--online[b-ryi0tmd92y] {
    background: color-mix(in oklab, #22C55E, transparent 84%);
    border-color: color-mix(in oklab, #22C55E, transparent 70%);
    color: color-mix(in oklab, #16A34A, black 10%);
}

.ticket-asset-badge--offline[b-ryi0tmd92y] {
    background: color-mix(in oklab, #EF4444, transparent 86%);
    border-color: color-mix(in oklab, #EF4444, transparent 72%);
    color: color-mix(in oklab, #DC2626, black 10%);
}

/* ── Tasks tab ──────────────────────────────────────────────────────── */

.task-progress[b-ryi0tmd92y] {
    margin-bottom: 16px;
}

.task-progress-label[b-ryi0tmd92y] {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    display: block;
}

.task-list[b-ryi0tmd92y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-row[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 0;
    border-radius: 10px;
    transition: background 0.15s;
}

.task-row:hover[b-ryi0tmd92y] {
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 55%);
}

.task-description[b-ryi0tmd92y] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-row--done .task-description[b-ryi0tmd92y] {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

.ticket-detail[b-ryi0tmd92y]  .task-delete {
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--mud-palette-text-secondary);
}

.task-row:hover[b-ryi0tmd92y]  .task-delete {
    opacity: 1;
}

.ticket-detail[b-ryi0tmd92y]  .task-delete:hover {
    color: var(--mud-palette-error);
}

.task-add[b-ryi0tmd92y] {
    margin-top: 12px;
}

.ticket-detail[b-ryi0tmd92y]  .task-add .mud-input-outlined-border {
    border-radius: 12px;
    border-style: dashed;
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
}

.ticket-detail[b-ryi0tmd92y]  .task-add .mud-input-outlined-border:focus-within {
    border-style: solid;
}

/* ── Work tabs (Time + Expenses) ────────────────────────────────────── */

.work-header[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.work-summary[b-ryi0tmd92y] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.work-summary strong[b-ryi0tmd92y] {
    font-family: var(--cw-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.work-summary-sub[b-ryi0tmd92y] {
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

.ticket-detail[b-ryi0tmd92y]  .work-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

/* The work tables are wider than a phone pane; .work-table's radius clip
   used to hard-crop the trailing columns. Let the table's own container
   scroll sideways instead, with a right-edge fade so the crop reads as
   "more to the right" (same affordance as the settings pill strip). */
.work-table-scroll[b-ryi0tmd92y] {
    position: relative;
}

.work-table-scroll[b-ryi0tmd92y]  .work-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .work-table-scroll[b-ryi0tmd92y]::after {
        content: "";
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--mud-palette-surface));
        border-radius: 0 12px 12px 0;
    }

    .work-table-scroll[b-ryi0tmd92y]  .work-table table {
        min-width: 640px;
    }
}

.ticket-detail[b-ryi0tmd92y]  .work-table th {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-surface), var(--mud-palette-background) 45%);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
    padding: 10px 12px;
}

.ticket-detail[b-ryi0tmd92y]  .work-table td {
    font-size: 0.8125rem;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 55%);
}

.ticket-detail[b-ryi0tmd92y]  .work-table tr:last-child td {
    border-bottom: none;
}

.work-notes[b-ryi0tmd92y] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
.ticket-triage-banner[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-triage-banner-actions[b-ryi0tmd92y] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Presence & collision (Phase 17.1) ─────────────────────────────── */

.ticket-presence-stack[b-ryi0tmd92y] {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.ticket-presence-avatar[b-ryi0tmd92y] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    color: white;
    background: color-mix(in oklab, var(--presence-color, var(--mud-palette-primary)), white 8%);
    border: 2px solid var(--mud-palette-surface);
    flex: 0 0 auto;
    cursor: default;
}

.ticket-presence-avatar + .ticket-presence-avatar[b-ryi0tmd92y] {
    margin-left: -6px;
}

.ticket-presence-avatar--typing[b-ryi0tmd92y] {
    animation: ticket-presence-pulse-b-ryi0tmd92y 1.6s ease-in-out infinite;
}

@keyframes ticket-presence-pulse-b-ryi0tmd92y {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--presence-color, var(--mud-palette-primary)), transparent 45%); }
    50% { box-shadow: 0 0 0 4px transparent; }
}

.ticket-typing-line[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.ticket-collision-strip[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    background: color-mix(in oklab, var(--mud-palette-warning), transparent 88%);
    border: 1px solid color-mix(in oklab, var(--mud-palette-warning), transparent 60%);
    color: var(--mud-palette-text-primary);
}

/* ── Mentions (Phase 17.2) ─────────────────────────────────────────── */

.ticket-mention-popup[b-ryi0tmd92y] {
    display: flex;
    flex-direction: column;
    margin: 4px 12px 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-4);
    overflow: hidden;
}

.ticket-mention-option[b-ryi0tmd92y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-text-primary);
}

.ticket-mention-option:hover[b-ryi0tmd92y] {
    background: var(--mud-palette-action-default-hover);
}

.ticket-mention-name[b-ryi0tmd92y] {
    font-weight: 600;
}

.ticket-mention-username[b-ryi0tmd92y] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

[b-ryi0tmd92y] .ticket-mention {
    display: inline;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 600;
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 86%);
    color: var(--mud-palette-primary);
}
/* /Components/Pages/Tickets/Dialogs/CreateTicketDialog.razor.rz.scp.css */
/* Section captions — same voice as the service-desk sidebar titles. */
.ctd-section[b-fkmmw4y14c] {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* Duplicate-awareness hint under the client picker */
.ctd-hint[b-fkmmw4y14c] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 2px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.service-desk[b-fkmmw4y14c]  .ctd-hint-icon,
.ctd-hint[b-fkmmw4y14c]  .mud-icon-root {
    font-size: 0.95rem;
    color: var(--mud-palette-info);
    flex: 0 0 auto;
    margin-top: 1px;
}

.ctd-hint-strong[b-fkmmw4y14c] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Priority color dots in the dropdown — mirrors the list's priority pills. */
.ctd-dot[b-fkmmw4y14c] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: baseline;
}

.ctd-dot--low[b-fkmmw4y14c] {
    background: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

.ctd-dot--medium[b-fkmmw4y14c] {
    background: var(--mud-palette-primary);
}

.ctd-dot--high[b-fkmmw4y14c] {
    background: #F97316;
}

.ctd-dot--critical[b-fkmmw4y14c] {
    background: #DC2626;
}

/* Assign row: select + "Assign to me" quick action */
.ctd-assign[b-fkmmw4y14c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctd-assign[b-fkmmw4y14c]  .ctd-assign-select {
    flex: 1 1 auto;
    min-width: 0;
}

.ctd-assign[b-fkmmw4y14c]  .ctd-assign-me {
    flex: 0 0 auto;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
/* /Components/Pages/Tickets/List.razor.rz.scp.css */
.service-desk[b-vior4bqp1i] {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

.sd-grid[b-vior4bqp1i] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    position: relative;
}

.sd-mobile-sidebar-toggle[b-vior4bqp1i] {
    display: none;
}

.sd-mobile-filter-toggle[b-vior4bqp1i] {
    display: none;
}

.sd-sidebar-overlay-head[b-vior4bqp1i] {
    display: none;
}

.sd-sidebar-tabs[b-vior4bqp1i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
}

.sd-sidebar-tab[b-vior4bqp1i] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.sd-sidebar-tab--active[b-vior4bqp1i] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sd-sidebar-tab:focus-visible[b-vior4bqp1i] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.sd-sidebar-tab-count[b-vior4bqp1i] {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in oklab, currentColor, transparent 88%);
    font-size: 0.6875rem;
}

@media (max-width: 600px) {
    .service-desk[b-vior4bqp1i]  .page-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }

    .service-desk[b-vior4bqp1i]  .page-header-actions .mud-button-root {
        width: 100%;
        margin: 0 !important;
    }

    .service-desk[b-vior4bqp1i]  .sd-header-primary {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

@media (max-width: 959.98px) {
    .sd-grid[b-vior4bqp1i] {
        grid-template-columns: 1fr;
    }

    .sd-mobile-sidebar-toggle[b-vior4bqp1i] {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 10px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
    }

    .sd-mobile-sidebar-toggle:focus-visible[b-vior4bqp1i] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .sd-mobile-sidebar-current[b-vior4bqp1i] {
        margin-left: auto;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .service-desk[b-vior4bqp1i]  .sd-sidebar:not(.sd-sidebar--mobile-open) {
        display: none;
    }

    .service-desk[b-vior4bqp1i]  .sd-sidebar.sd-sidebar--mobile-open {
        position: absolute;
        top: 56px;
        left: 0;
        z-index: 20;
        width: min(360px, calc(100% - 24px));
        max-height: min(620px, calc(100vh - 160px));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
    }

    .sd-sidebar-overlay-head[b-vior4bqp1i] {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: -14px -14px 8px;
        padding: 10px 10px 10px 14px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-surface);
        font-size: 0.8125rem;
        font-weight: 750;
    }
}

/* Cards */
.service-desk[b-vior4bqp1i]  .sd-sidebar,
.service-desk[b-vior4bqp1i]  .sd-main {
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

/* Keep buttons human-readable (not all caps). */
.service-desk[b-vior4bqp1i]  .mud-button-root {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Sidebar (MudPaper root; needs ::deep) */
.service-desk[b-vior4bqp1i]  .sd-sidebar {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 959.98px) {
    .service-desk[b-vior4bqp1i]  .sd-sidebar {
        position: absolute;
    }
}

@media (max-width: 600px) {
    .service-desk[b-vior4bqp1i]  .sd-sidebar.sd-sidebar--mobile-open {
        width: 100%;
        max-height: min(42vh, 320px);
    }
}

.sd-section[b-vior4bqp1i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-section-title[b-vior4bqp1i] {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 4px 8px 8px;
}

.sd-section-title-row[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 8px 8px;
}

.service-desk[b-vior4bqp1i]  .sd-divider {
    margin: 12px 0 !important;
    opacity: 0.9;
}

.sd-nav-item[b-vior4bqp1i] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sd-nav-item:hover[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 25%);
    color: var(--mud-palette-text-primary);
}

.sd-nav-item:focus-visible[b-vior4bqp1i] {
    outline: 2px solid color-mix(in oklab, var(--mud-palette-primary), transparent 55%);
    outline-offset: 2px;
}

.sd-nav-item:disabled[b-vior4bqp1i] {
    cursor: not-allowed;
    opacity: 0.6;
}

.sd-nav-item--disabled:hover[b-vior4bqp1i] {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.sd-nav-item--active[b-vior4bqp1i] {
    background: var(--mud-palette-primary-lighten);
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 70%);
    color: var(--mud-palette-primary);
}

.sd-nav-item--active:hover[b-vior4bqp1i] {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.service-desk[b-vior4bqp1i]  .sd-nav-item .mud-icon-root {
    font-size: 1.15rem;
    color: currentColor;
    opacity: 0.95;
}

.sd-nav-label[b-vior4bqp1i] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
}

.sd-nav-count[b-vior4bqp1i] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 750;
    color: inherit;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mud-palette-lines-default), transparent 72%);
}

.sd-nav-item--active .sd-nav-count[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 86%);
}

/* Saved view rows: nav item + hover-revealed delete */
.sd-savedview-row[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sd-savedview-row > .sd-nav-item[b-vior4bqp1i] {
    flex: 1 1 auto;
    min-width: 0;
}

.service-desk[b-vior4bqp1i]  .sd-savedview-delete {
    opacity: 0;
    flex: 0 0 auto;
    transition: opacity 0.12s ease;
}

.sd-savedview-row:hover[b-vior4bqp1i]  .sd-savedview-delete,
.service-desk[b-vior4bqp1i]  .sd-savedview-delete:focus-visible {
    opacity: 0.8;
}

.sd-pill[b-vior4bqp1i] {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 25%);
    color: var(--mud-palette-text-secondary);
}

.sd-avatar[b-vior4bqp1i] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 850;
    color: #fff;
    background: var(--sd-avatar-bg, var(--mud-palette-primary));
}

.sd-muted[b-vior4bqp1i] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 8px;
}

.service-desk[b-vior4bqp1i]  .sd-teammate-search {
    margin: 0 4px 6px;
}

.sd-strong[b-vior4bqp1i] {
    font-weight: 750;
    color: var(--mud-palette-text-primary);
}

/* Main (MudPaper root; needs ::deep) */
.service-desk[b-vior4bqp1i]  .sd-main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: sd-main;
}

.sd-main-head[b-vior4bqp1i] {
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.sd-main-head-left[b-vior4bqp1i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sd-main-title[b-vior4bqp1i] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.service-desk[b-vior4bqp1i]  .sd-main-title-text {
    font-weight: 850;
    letter-spacing: -0.015em;
}

.sd-main-count[b-vior4bqp1i] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.sd-main-count[b-vior4bqp1i]::before {
    content: "•";
    opacity: 0.55;
    margin: 0 8px 0 2px;
}

.sd-main-sub[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    column-gap: 12px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.sd-main-sub-label[b-vior4bqp1i] {
    flex: 0 0 auto;
}

.sd-main-tools[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.service-desk[b-vior4bqp1i]  .sd-search {
    width: 260px;
}

.service-desk[b-vior4bqp1i]  .sd-search .mud-input-outlined {
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-surface), #000 4%);
}

.service-desk[b-vior4bqp1i]  .sd-search .mud-input-outlined-border {
    border-radius: 10px;
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 20%) !important;
}

.service-desk[b-vior4bqp1i]  .sd-search input {
    font-size: 0.8125rem;
}

/* Filter bar */
.sd-filterbar[b-vior4bqp1i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.service-desk[b-vior4bqp1i]  .sd-filter {
    width: 145px;
    flex: 0 0 auto;
}

.service-desk[b-vior4bqp1i]  .sd-filter--wide {
    width: 185px;
}

.service-desk[b-vior4bqp1i]  .sd-filter .mud-input-outlined {
    background: color-mix(in oklab, var(--mud-palette-surface), #000 3%);
}

.service-desk[b-vior4bqp1i]  .sd-filterbar-clear {
    margin-left: auto;
}

/* Bulk action bar */
.sd-bulkbar[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 92%);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-primary), transparent 75%);
}

.sd-bulkbar-count[b-vior4bqp1i] {
    font-size: 0.8125rem;
    font-weight: 750;
    color: var(--mud-palette-primary);
    margin-right: 6px;
}

.service-desk[b-vior4bqp1i]  .sd-bulkbar-clear {
    margin-left: auto;
}

.sd-bulkbar-action-wrap[b-vior4bqp1i] {
    display: inline-flex;
}

/* Table */
.sd-table[b-vior4bqp1i] {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.sd-table-head[b-vior4bqp1i],
.sd-row[b-vior4bqp1i] {
    display: grid;
    /* Explicit floors keep compact laptop tables readable. The status,
       priority and due floors fit their widest nowrap pill ("In Progress",
       "CRITICAL", "Overdue 24h" ≈ 87px) so chips never bleed across the
       column gap into their neighbours; min-width matches the floor sum so
       any pane too narrow for these tracks collapses to cards instead. */
    grid-template-columns:
        32px
        minmax(140px, 2fr)
        minmax(110px, 1.65fr)
        minmax(88px, 0.85fr)
        minmax(88px, 0.72fr)
        minmax(84px, 1.08fr)
        minmax(88px, 0.82fr)
        minmax(62px, 0.58fr)
        32px;
    min-width: 824px;
    align-items: center;
    column-gap: 8px;
}

@container sd-main (max-width: 823.98px) {
    .sd-main-head[b-vior4bqp1i] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .sd-main-tools[b-vior4bqp1i] {
        justify-content: flex-start;
        width: 100%;
    }

    .service-desk[b-vior4bqp1i]  .sd-search {
        width: 100%;
        flex: 1 0 100%;
    }

    .sd-filterbar[b-vior4bqp1i] {
        padding: 12px 16px;
    }

    .sd-mobile-filter-toggle[b-vior4bqp1i] {
        width: calc(100% - 32px);
        min-height: 44px;
        margin: 0 16px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 10px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        text-align: left;
    }

    .sd-mobile-filter-toggle:focus-visible[b-vior4bqp1i] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .sd-mobile-filter-current[b-vior4bqp1i] {
        margin-left: auto;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .sd-filterbar:not(.sd-filterbar--mobile-open)[b-vior4bqp1i] {
        display: none;
    }

    .service-desk[b-vior4bqp1i]  .sd-filter,
    .service-desk[b-vior4bqp1i]  .sd-filter--wide {
        width: 100%;
        flex: 1 0 100%;
    }

    .sd-table[b-vior4bqp1i] {
        overflow-x: visible;
        gap: 10px;
        padding: 12px;
        background: var(--mud-palette-background);
    }

    .sd-table-head[b-vior4bqp1i] {
        display: none;
    }

    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        min-width: 0;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        grid-template-areas:
            "check details actions"
            "client client client"
            "status status status"
            "priority priority priority"
            "assigned assigned assigned"
            "due due due"
            "updated updated updated";
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        background: var(--mud-palette-surface);
    }

    .sd-cell-check[b-vior4bqp1i] { grid-area: check; }
    .sd-cell-details[b-vior4bqp1i] { grid-area: details; }
    .sd-cell-actions[b-vior4bqp1i] { grid-area: actions; }
    .sd-cell-client[b-vior4bqp1i] { grid-area: client; }
    .sd-cell-status[b-vior4bqp1i] { grid-area: status; }
    .sd-cell-priority[b-vior4bqp1i] { grid-area: priority; }
    .sd-cell-assigned[b-vior4bqp1i] { grid-area: assigned; }
    .sd-cell-due[b-vior4bqp1i] { grid-area: due; }
    .sd-cell-updated[b-vior4bqp1i] { grid-area: updated; }

    .sd-cell-client[b-vior4bqp1i],
    .sd-cell-status[b-vior4bqp1i],
    .sd-cell-priority[b-vior4bqp1i],
    .sd-cell-assigned[b-vior4bqp1i],
    .sd-cell-due[b-vior4bqp1i],
    .sd-cell-updated[b-vior4bqp1i] {
        min-width: 0;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .sd-cell-client[b-vior4bqp1i]::before,
    .sd-cell-status[b-vior4bqp1i]::before,
    .sd-cell-priority[b-vior4bqp1i]::before,
    .sd-cell-assigned[b-vior4bqp1i]::before,
    .sd-cell-due[b-vior4bqp1i]::before,
    .sd-cell-updated[b-vior4bqp1i]::before {
        color: var(--mud-palette-text-secondary);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: none;
    }

    .sd-cell-client[b-vior4bqp1i]::before { content: "Client"; }
    .sd-cell-status[b-vior4bqp1i]::before { content: "Status"; }
    .sd-cell-priority[b-vior4bqp1i]::before { content: "Priority"; }
    .sd-cell-assigned[b-vior4bqp1i]::before { content: "Assigned"; }
    .sd-cell-due[b-vior4bqp1i]::before { content: "Due"; }
    .sd-cell-updated[b-vior4bqp1i]::before { content: "Updated"; }

    .sd-cell-status[b-vior4bqp1i] {
        justify-content: stretch;
    }

    .sd-cell-status > :not(:first-child)[b-vior4bqp1i] {
        grid-column: 2;
    }

    .sd-cell-actions[b-vior4bqp1i] {
        justify-self: end;
    }

    .sd-assign-trigger[b-vior4bqp1i] {
        padding-left: 0;
    }
}

/* A common 390px phone leaves enough card width to pair the genuinely short
   fields, but not enough to squeeze client or technician names into a half
   column. Use the right side without reintroducing name truncation. */
@container sd-main (min-width: 340px) and (max-width: 419.98px) {
    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 32px;
        grid-template-areas:
            "check details details actions"
            "client client client client"
            "status status priority priority"
            "assigned assigned assigned assigned"
            "due due updated updated";
        column-gap: 12px;
    }
}

/* A tablet has enough room for a useful two-column summary. Keeping the
   phone's one-field-per-row layout here made every ticket card needlessly
   tall and forced far more scrolling through a busy queue. */
@container sd-main (min-width: 420px) and (max-width: 823.98px) {
    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 32px;
        grid-template-areas:
            "check details details actions"
            "client client status status"
            "priority priority assigned assigned"
            "due due updated updated";
        column-gap: 12px;
    }
}

/* A wide card pane can show three metadata columns without falling back to
   the dense table. This keeps tablet queues compact while preserving
   the card layout's visible row actions. */
@container sd-main (min-width: 720px) and (max-width: 823.98px) {
    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        grid-template-columns: 32px repeat(6, minmax(0, 1fr)) 32px;
        grid-template-areas:
            "check details details details details details details actions"
            ". client client status status priority priority ."
            ". assigned assigned due due updated updated .";
        column-gap: 10px;
    }
}

.sd-table-head[b-vior4bqp1i] {
    padding: 10px 18px;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 35%);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.sd-th-actions[b-vior4bqp1i] {
    justify-self: end;
}

.sd-th-check[b-vior4bqp1i] {
    display: flex;
    align-items: center;
}

/* Sortable header buttons inherit the th look */
.sd-th-sortable[b-vior4bqp1i] {
    display: inline-flex;
    align-items: center;
    /* The UA stylesheet gives <button> justify-content: center; without this
       override the header labels drift toward the middle of their columns
       instead of left-aligning with the cell content below. */
    justify-content: flex-start;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    min-height: 24px;
}

.sd-th-sortable:hover[b-vior4bqp1i] {
    color: var(--mud-palette-primary);
}

.sd-th-sortable:focus-visible[b-vior4bqp1i] {
    outline: 2px solid color-mix(in oklab, var(--mud-palette-primary), transparent 55%);
    outline-offset: 2px;
    border-radius: 4px;
}

.service-desk[b-vior4bqp1i]  .sd-sort-icon {
    font-size: 0.85rem;
    color: var(--mud-palette-primary);
}

.sd-row[b-vior4bqp1i] {
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 40%);
    cursor: pointer;
    transition: background 0.12s ease;
}

.sd-row:hover[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 18%);
}

.sd-row:focus-visible[b-vior4bqp1i] {
    outline: 2px solid color-mix(in oklab, var(--mud-palette-primary), transparent 45%);
    outline-offset: -2px;
}

.service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
    padding-top: 10px;
    padding-bottom: 10px;
}

.sd-cell[b-vior4bqp1i] {
    min-width: 0;
}

.sd-cell-check[b-vior4bqp1i] {
    display: flex;
    align-items: center;
}

.sd-cell-actions[b-vior4bqp1i] {
    justify-self: end;
}

.sd-ticket-title[b-vior4bqp1i] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-ticket-title .sd-row-link[b-vior4bqp1i] {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-parent-ticket[b-vior4bqp1i] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.sd-ticket-meta[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.service-desk[b-vior4bqp1i]  .sd-main--compact .sd-ticket-meta {
    margin-top: 2px;
}

.sd-ticket-id[b-vior4bqp1i] {
    font-family: var(--cw-font-mono);
    font-weight: 600;
    letter-spacing: normal;
    /* Never break mid-ID ("TK-" / "0010") — the requester name beside it
       is the flexible, truncating part of the meta line. */
    white-space: nowrap;
    flex: 0 0 auto;
}

.sd-ticket-requester[b-vior4bqp1i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-dot[b-vior4bqp1i] {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--mud-palette-text-secondary);
    opacity: 0.45;
    flex: 0 0 auto;
}

.sd-cell-client[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sd-client-avatar[b-vior4bqp1i] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 850;
    color: #fff;
    background: var(--sd-client-bg, var(--mud-palette-primary));
    flex: 0 0 auto;
}

.sd-client-avatar--img[b-vior4bqp1i] {
    background: transparent;
    overflow: hidden;
}

.sd-client-avatar--img img[b-vior4bqp1i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-client-text[b-vior4bqp1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-link[b-vior4bqp1i] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

.sd-link:hover[b-vior4bqp1i] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.sd-client-sub[b-vior4bqp1i] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-badge[b-vior4bqp1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    /* A pill that wraps ("In\nProgress") stops reading as a pill — the
       column floors are sized so every label fits on one line. */
    white-space: nowrap;
}

/* Status shouldn't be all-caps */
.sd-status[b-vior4bqp1i] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 750;
}

.sd-status--new[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-lines-default), transparent 82%);
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 65%);
    color: var(--mud-palette-text-secondary);
}

.sd-status--inprogress[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 86%);
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 72%);
    color: var(--mud-palette-primary);
}

.sd-status--waiting[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-warning), transparent 86%);
    border-color: color-mix(in oklab, var(--mud-palette-warning), transparent 70%);
    color: color-mix(in oklab, var(--mud-palette-warning), black 18%);
}

.sd-status--resolved[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-success), transparent 86%);
    border-color: color-mix(in oklab, var(--mud-palette-success), transparent 70%);
    color: color-mix(in oklab, var(--mud-palette-success), black 18%);
}

.sd-status--closed[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 88%);
    border-color: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 76%);
    color: var(--mud-palette-text-secondary);
}

/* Priority pills */
.sd-priority--low[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 90%);
    border-color: color-mix(in oklab, var(--mud-palette-text-secondary), transparent 78%);
    color: var(--mud-palette-text-secondary);
}

.sd-priority--medium[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-primary), transparent 88%);
    border-color: color-mix(in oklab, var(--mud-palette-primary), transparent 74%);
    color: var(--mud-palette-primary);
}

.sd-priority--high[b-vior4bqp1i] {
    background: color-mix(in oklab, #F97316, transparent 86%);
    border-color: color-mix(in oklab, #F97316, transparent 72%);
    color: #C2410C;
}

.sd-priority--critical[b-vior4bqp1i] {
    background: color-mix(in oklab, #DC2626, transparent 88%);
    border-color: color-mix(in oklab, #DC2626, transparent 74%);
    color: #B91C1C;
}

/* SLA chips — response/resolution target attention (Phase 7.4).
   Stacked under the status badge; absent on healthy tickets. */
.sd-cell-status[b-vior4bqp1i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.sd-sla[b-vior4bqp1i] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 750;
    white-space: nowrap;
    font-size: 0.65rem;
    padding: 2px 8px;
}

.sd-sla--warn[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-warning), transparent 86%);
    border-color: color-mix(in oklab, var(--mud-palette-warning), transparent 70%);
    color: color-mix(in oklab, var(--mud-palette-warning), black 22%);
}

.sd-sla--overdue[b-vior4bqp1i] {
    background: color-mix(in oklab, #DC2626, transparent 88%);
    border-color: color-mix(in oklab, #DC2626, transparent 74%);
    color: #B91C1C;
}

.sd-unassigned[b-vior4bqp1i] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Source icon in the ticket meta line */
.service-desk[b-vior4bqp1i]  .sd-source-icon {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
    vertical-align: text-bottom;
}

/* Let the menu wrapper fill the cell so the trigger can use the full width */
.service-desk[b-vior4bqp1i]  .sd-cell-assigned .mud-menu,
.service-desk[b-vior4bqp1i]  .sd-cell-assigned .mud-menu-activator {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Inline assignee menu trigger */
.sd-assign-trigger[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    /* The UA stylesheet centers a <button>'s flex content; without this the
       assignee text floats toward the middle of its column and jitters
       against the left-aligned header (shorter names drift further right). */
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 4px 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.sd-assign-trigger .sd-assignee[b-vior4bqp1i] {
    min-width: 0;
    overflow: hidden;
}

.sd-assign-trigger .sd-assign-caret[b-vior4bqp1i],
.service-desk[b-vior4bqp1i]  .sd-assign-trigger .mud-icon-root {
    margin-left: auto;
}

.sd-assign-trigger:hover[b-vior4bqp1i],
.sd-assign-trigger:focus-visible[b-vior4bqp1i] {
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 30%);
    background: color-mix(in oklab, var(--mud-palette-background), var(--mud-palette-surface) 30%);
}

.service-desk[b-vior4bqp1i]  .sd-cell-assigned .mud-menu-activator:focus-visible .sd-assign-trigger {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.service-desk[b-vior4bqp1i]  .sd-assign-caret {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    flex: 0 0 auto;
    transition: opacity 0.12s ease;
}

.sd-row:hover[b-vior4bqp1i]  .sd-assign-caret,
.sd-assign-trigger:hover[b-vior4bqp1i]  .sd-assign-caret,
.sd-assign-trigger:focus-visible[b-vior4bqp1i]  .sd-assign-caret {
    opacity: 0.9;
}

.sd-assignee[b-vior4bqp1i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sd-assignee-avatar[b-vior4bqp1i] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 850;
    background: color-mix(in oklab, var(--mud-palette-primary), white 78%);
    color: color-mix(in oklab, var(--mud-palette-primary), black 12%);
    flex: 0 0 auto;
}

.sd-assignee-name[b-vior4bqp1i] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* The initials repeat text already shown beside them and become a third grid
   item in responsive cards, which steals the name column and creates a
   phantom extra row. Prioritize the actual client and technician names. */
.sd-client-avatar[b-vior4bqp1i],
.sd-assignee-avatar[b-vior4bqp1i] {
    display: none;
}

/* Dense laptop/desktop rows prioritize readable names over decorative
   initials. The compact assignee button remains fully interactive. */
@container sd-main (min-width: 824px) {
    .service-desk[b-vior4bqp1i]  .sd-assign-caret {
        display: none;
    }

    .sd-cell-client[b-vior4bqp1i],
    .sd-assignee[b-vior4bqp1i] {
        gap: 0;
    }

    .sd-assign-trigger[b-vior4bqp1i] {
        padding-inline: 0;
    }

    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        padding-block: 10px;
    }

    .sd-ticket-title[b-vior4bqp1i],
    .sd-ticket-title .sd-row-link[b-vior4bqp1i] {
        white-space: normal;
    }

    .sd-ticket-title .sd-row-link[b-vior4bqp1i] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

.sd-cell-updated[b-vior4bqp1i] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.sd-cell-due[b-vior4bqp1i] {
    white-space: nowrap;
}

/* A future-dated promise: informational, no alarm coloring. */
.sd-due-plain[b-vior4bqp1i] {
    background: color-mix(in oklab, var(--mud-palette-lines-default), transparent 75%);
    border-color: color-mix(in oklab, var(--mud-palette-lines-default), transparent 45%);
    color: var(--mud-palette-text-secondary);
}

.sd-loading[b-vior4bqp1i] {
    padding: 18px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.sd-empty[b-vior4bqp1i] {
    padding: 40px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

.sd-empty-title[b-vior4bqp1i] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sd-empty-sub[b-vior4bqp1i] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Pager */
.sd-pager[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default), transparent 35%);
}

.sd-pager-left[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-pager-right[b-vior4bqp1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.service-desk[b-vior4bqp1i]  .sd-perpage {
    min-width: 56px;
}

/* Keep the compact card composition authoritative over desktop cell rules. */
@container sd-main (max-width: 823.98px) {
    .sd-row[b-vior4bqp1i],
    .service-desk[b-vior4bqp1i]  .sd-main--compact .sd-row {
        padding: 12px;
        border: 1px solid var(--mud-palette-lines-default);
    }

    .sd-cell-client[b-vior4bqp1i],
    .sd-cell-status[b-vior4bqp1i],
    .sd-cell-priority[b-vior4bqp1i],
    .sd-cell-assigned[b-vior4bqp1i],
    .sd-cell-due[b-vior4bqp1i],
    .sd-cell-updated[b-vior4bqp1i] {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .sd-cell-assigned[b-vior4bqp1i] {
        column-gap: 12px;
    }

    .sd-assign-trigger[b-vior4bqp1i] {
        padding-left: 0;
    }

    /* Cards have substantially more vertical room than dense table rows.
       Spend a second line on the subject instead of hiding the most useful
       identifying information while the metadata grid still has open space.
       This lives in the final compact override so the base table typography
       cannot silently restore a one-line ellipsis later in the stylesheet. */
    .sd-ticket-title[b-vior4bqp1i],
    .sd-ticket-title .sd-row-link[b-vior4bqp1i] {
        white-space: normal;
    }

    .sd-ticket-title .sd-row-link[b-vior4bqp1i] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

@container sd-main (max-width: 419.98px) {
    .sd-ticket-title .sd-row-link[b-vior4bqp1i] {
        -webkit-line-clamp: 3;
    }
}
/* /Components/Pages/Tickets/TicketScheduleCard.razor.rz.scp.css */
/* Card internals only — the shared .ticket-side-* idiom comes from
   Details.razor.css ::deep rules. */

.schedule-due-line[b-nclhyfojkj] {
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.schedule-due-line:focus-visible[b-nclhyfojkj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.schedule-due--hot[b-nclhyfojkj] {
    font-weight: 700;
}

.schedule-entry-line[b-nclhyfojkj] {
    align-items: flex-start;
}

.schedule-entry-body[b-nclhyfojkj] {
    flex: 1;
    min-width: 0;
}

.schedule-entry-title[b-nclhyfojkj] {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow-wrap: anywhere;
}

.schedule-entry-sub[b-nclhyfojkj] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.schedule-entry-line[b-nclhyfojkj]  .schedule-repeat-icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Add and row-action menus are primary touch controls on the stacked mobile
   ticket sidebar. MudMenu's small icon default is only 26px. */
.ticket-side-title-row[b-nclhyfojkj]  .mud-menu-activator,
.ticket-side-title-row[b-nclhyfojkj]  .mud-icon-button,
.schedule-entry-line[b-nclhyfojkj]  .mud-menu-activator,
.schedule-entry-line[b-nclhyfojkj]  .mud-icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
}