/* Consignors module - franchise location-scoped grid + preview */

/* When hosted in .jbf-page, map to shared admin tokens */
.cn-page.jbf-page {
    --cn-purple: var(--cum-primary, #7d5b81);
    --cn-purple-dark: #5a4360;
    --cn-border: var(--cum-border, #e6e8e9);
    --cn-muted: var(--cum-muted-foreground, #808c91);
    --cn-surface: var(--cum-secondary, #f6f5f8);
}

.cn-page {
    --cn-purple: var(--jbf-plum, #7d5b81);
    --cn-purple-dark: var(--rz-primary-darker, #58405b);
    --cn-border: #e6e8e9;
    --cn-muted: #808c91;
    --cn-surface: var(--jbf-canvas);
    --cn-green-bg: var(--jbf-status-success-bg);
    --cn-green-fg: var(--jbf-status-success-fg);
    --cn-grey-bg: #eceff1;
    --cn-grey-fg: #455a64;
    --cn-red-bg: var(--jbf-status-danger-bg);
    --cn-red-fg: var(--jbf-status-danger-fg);
}

.cn-page .cn-page-title {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
}

/* Main Consignors / Groups tabs: shared .event-admin-tab-* (corporate-user-management.css) */

/* The Consignors page wraps its tab strip in <div class="jbf-header
   event-admin-header"> (matching /event-management and /team-scheduling) so the
   side-padding + 24px top / 16px bottom rhythm is provided by the shared
   .jbf-header.event-admin-header rule. No bespoke padding overrides needed. */

.cn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 32px;
    background: #fff;
    border-bottom: 1px solid var(--cn-border, #e6e8e9);
    overflow: visible;
    position: relative;
    z-index: 6;
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
    .cn-toolbar { padding: 10px 16px; }
}

/* Bulk-actions bar replaces the cn-toolbar when one or more grid rows are
   selected (desktop only). Mirrors the .cum-actions-bar layout in
   corporate-user-management.css - summary on the left, primary action buttons
   in the middle, "Clear" on the right. Reuses cn-toolbar's outer chrome
   (background / border / horizontal padding / z-index) so the visual band
   stays pixel-stable across the swap. */
.cn-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px 14px;
    padding: 12px 32px;
    background: #fff;
    border-bottom: 1px solid var(--cn-border, #e6e8e9);
    position: relative;
    z-index: 6;
}

@media (max-width: 767.98px) {
    .cn-actions-bar { padding: 10px 16px; }
}

.cn-actions-bar-summary {
    font-size: 16px;
    font-weight: 500;
    margin-right: 8px;
    flex-shrink: 0;
    line-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Inline spinner that sits next to the busy-state progress label
   ("Processing 5 of 20..."). Same 14px ring used elsewhere in the app for
   consistency; we keep it self-contained so the bar doesn't have to pull in
   the Radzen ProgressBar component just for this one indicator. */
.cn-actions-bar-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--cn-border, #e6e8e9);
    border-top-color: var(--jbf-pink, #7d5b81);
    border-radius: 50%;
    display: inline-block;
    animation: cn-actions-bar-spin .8s linear infinite;
    flex-shrink: 0;
}

@keyframes cn-actions-bar-spin {
    to { transform: rotate(360deg); }
}

/* Visual "this whole row is busy" tint so the admin notices the swap to the
   working state even from peripheral vision. Subtle so we don't make the bar
   look broken / disabled while a permission-denied per-row loop runs. */
.cn-actions-bar--busy {
    background: linear-gradient(0deg, rgba(125,91,129,.04), rgba(125,91,129,.04)), #fff;
}

.cn-actions-bar-buttons {
    flex: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.cn-actions-bar-clear {
    flex-shrink: 0;
}

/* Keep chrome from growing; let GridWithPreviewWorkspace (.gmd-main) fill viewport height */
.cn-page.jbf-page > .jbf-header,
.cn-page.jbf-page > .cn-toolbar,
.cn-page.jbf-page > .cn-actions-bar,
.cn-page.jbf-page > .cn-advanced-panel {
    flex-shrink: 0;
}

.cn-page.jbf-page > .gmd-main.cum-main {
    flex: 1;
    min-height: 0;
}

/* ---------------------------------------------------------------------------
   Page-height release for /consignors.

   The shared `.jbf-page` height (`100dvh - --jbf-layout-offset - 16px`) bakes
   in the AppHeader offset (and an extra 66px of Radzen body padding) that
   the parent `.jbf-shell__body` already absorbed - see the explicit
   call-out in site.css §"Fullscreen mode" which names this exact page:

       "the page is sized 82px shorter than the viewport and a blank band
        shows up under the bottom toolbar (e.g. /consignors pagination row
        floats with empty space below it)."

   The fullscreen branch lifts those clamps when the user hides the chrome
   (`.is-fullscreen .jbf-page { height: 100dvh - 16px }`); the dashboard fix
   takes the same approach via `min-height: 100%` on `.dashboard-landing-shell`.
   We do the same here, scoped to `.cn-page.jbf-page` so other modules keep
   their existing sizing until they opt in.

   Subtracting only `--jbf-header-h` (the actual top chrome already sitting
   above `.jbf-shell__body`) plus the page's own 8px*2 margin gives the
   grid + side panel the full available height of the shell body - no more
   wasted band below the pagination row. xs/sm/md tiers keep the shared
   mobile rule (`.jbf-page { height: 100vh - --jbf-layout-offset-mobile - 8px }`)
   because the mobile tab bar / sticky bottom nav need the larger offset. */
@media (min-width: 1024px) {
    .cn-page.jbf-page {
        height: calc(100vh - var(--jbf-header-h) - 16px);
        max-height: calc(100vh - var(--jbf-header-h) - 16px);
    }
    @supports (height: 100dvh) {
        .cn-page.jbf-page {
            height: calc(100dvh - var(--jbf-header-h) - 16px);
            max-height: calc(100dvh - var(--jbf-header-h) - 16px);
        }
    }

    /* Fullscreen restore (must come AFTER the non-fullscreen rule above
       and have higher specificity to actually win - same selector
       specificity in CSS resolves by source order, but `.is-fullscreen`
       is on the RadzenLayout ancestor, so adding it bumps the descendant
       chain to (0,3,0) and beats the non-fullscreen `.cn-page.jbf-page`
       rule even when consignors.css loads after site.css). In fullscreen
       MainLayout removes the AppHeader, so subtracting --jbf-header-h
       would shave 82px off a viewport that no longer has anything above
       it - mirrors site.css's `.is-fullscreen .jbf-page` baseline. */
    .is-fullscreen .cn-page.jbf-page {
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }
    @supports (height: 100dvh) {
        .is-fullscreen .cn-page.jbf-page {
            height: calc(100dvh - 16px);
            max-height: calc(100dvh - 16px);
        }
    }
}

.cn-toolbar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-muted);
}

/* Tab-strip page actions (Add Consignor + fullscreen icon).
   The fullscreen toggle mirrors the rapid-tags icon — a small pink square
   with a white glyph that flips between enter/exit states. It sits to the
   right of "+ Add Consignor" via .event-admin-tab-strip-actions and stays
   visible on both Consignors + Groups tabs so users can drop the JBFOne
   chrome (header + leftnav) without leaving the page.

   margin-left: auto pushes the actions cluster to the far right of the tab
   strip. The default .event-admin-tab-strip-actions only declares
   "flex: 0 0 auto" with no spacer in the toggle, so without this override
   the buttons sit immediately to the right of the tabs instead of pinning
   to the row's right edge. */
.cn-tab-actions {
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.cn-tab-actions__fullscreen {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--jbf-pink, #7d5b81);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
    transition: background-color 120ms ease, transform 120ms ease;
}

.cn-tab-actions__fullscreen:hover {
    background: var(--jbf-purple, #6b4c81);
}

.cn-tab-actions__fullscreen:focus-visible {
    outline: 2px solid var(--jbf-pink, #7d5b81);
    outline-offset: 2px;
}

.cn-tab-actions__fullscreen[aria-pressed="true"] {
    background: var(--jbf-purple, #6b4c81);
}

.cn-group-roster-toggle {
    display: inline-flex;
    border: 1px solid var(--cn-border, #d4dde2);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    height: 32px;
}

.cn-roster-btn {
    border: 0;
    background: transparent;
    color: #4e5e65;
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    cursor: pointer;
    height: 100%;
}

.cn-roster-btn + .cn-roster-btn {
    border-left: 1px solid var(--cn-border, #d4dde2);
}

.cn-roster-btn.active {
    background: var(--cn-accent, #7d5b81);
    color: #fff;
}

.cn-search-wrap {
    /* Halved (2026-05-15) at user request - the previous 240px basis was over-
       sized for the search content admins typically type (a few chars of name
       or consignor number) and was eating room that the new bulk-action bar
       wants for the Import / Export / Add cluster on narrower viewports. */
    flex: 0 1 120px;
    min-width: 80px;
    max-width: 140px;
}

.cn-icon-tool {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--cn-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4e5e65;
}

.cn-icon-tool:hover {
    border-color: var(--cn-purple);
    color: var(--cn-purple);
}

.cn-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Outlined toolbar actions (white + purple border, match Upload Tags style - no pink fill) */
.cn-outline-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--cn-purple);
    background: #fff;
    border: 1px solid var(--cn-purple);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cn-outline-action-btn:hover:not(:disabled) {
    background: #faf8fb;
}

.cn-outline-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cn-outline-action-btn:focus-visible {
    outline: 2px solid var(--cn-purple);
    outline-offset: 2px;
}

.cn-outline-action-icon {
    flex-shrink: 0;
    color: var(--cn-purple);
}

.cn-toolbar-outline-dd .generic-dropdown .dropdown-control {
    color: var(--cn-purple) !important;
    background-color: #fff !important;
    border: 1px solid var(--cn-purple) !important;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 14px;
    padding: 0.55rem 1rem;
}

.cn-toolbar-outline-dd .generic-dropdown .dropdown-control:hover {
    background-color: #faf8fb !important;
}

.cn-toolbar-outline-dd .generic-dropdown .dropdown-control i {
    color: var(--cn-purple);
}

.cn-advanced-panel {
    border-top: none;
    border-bottom: 1px solid var(--cn-border, #e6e8e9);
    background: var(--cn-surface, #f6f5f8);
    padding: 14px 32px;
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
    .cn-advanced-panel { padding: 12px 16px; }
}

.cn-advanced-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cn-advanced-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* TODO(responsive): off-tier literal at lg/xl boundary -- revisit during phase4 governance. Keep value to avoid xl regressions. */
@media (max-width: 1100px) {
    .cn-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 600px) {
    .cn-advanced-grid {
        grid-template-columns: 1fr;
    }
}

.cn-filter-col h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cn-filter-scroll {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fafafa;
}

.cn-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

/* Empty-state row inside .cn-filter-scroll (e.g. "No groups defined for this
   location yet."). Mirrors .cn-filter-row's size/padding so the message reads
   as plain body copy rather than picking up an italic/oblique fallback from
   the surrounding label styling. */
.cn-filter-empty {
    padding: 4px 0;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    color: var(--cn-muted);
}

.cn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cn-dot--purple { background: var(--jbf-plum, #7d5b81); }
.cn-dot--blue { background: var(--jbf-cyan, #00a8ba); }
.cn-dot--green { background: var(--jbf-mint, #00a891); }
.cn-dot--orange { background: var(--jbf-amber, #fdb526); }

.cn-grid-host {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cn-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.cn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cn-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--cn-border);
    font-weight: 600;
    color: var(--cn-muted);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cn-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cn-th-sortable:hover {
    color: #021922;
}

.cn-th-sort-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cn-th-numeric,
.cn-td-numeric {
    text-align: right;
}

.cn-th-numeric .cn-th-sort-inner {
    justify-content: flex-end;
    width: 100%;
}

.cn-sort-ind {
    font-size: 11px;
    color: var(--cn-purple);
}

.cn-table td {
    padding: 12px;
    border-bottom: 1px solid var(--cn-border);
    vertical-align: middle;
}

.cn-table tr.cn-row-active td {
    background: rgba(125, 91, 129, 0.08);
}

.cn-consignor-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a282a6, #7d5b81);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-avatar.cn-avatar--photo {
    display: block;
    object-fit: cover;
    border: 1px solid var(--cn-border);
    background: #eee;
}

.cn-consignor-name {
    font-weight: 700;
    color: #021922;
}

.cn-consignor-id {
    font-size: 11px;
    color: var(--cn-muted);
}

/* Inventory $ / count - same vertical rhythm as consignor name + id, right-aligned for numbers */
.cn-inv-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.cn-inv-stack-primary {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-align: right;
}

.cn-inv-stack-secondary {
    font-size: 11px;
    line-height: 1.2;
    color: var(--cn-muted);
    text-align: right;
}

.cn-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.cn-badge--registered {
    background: var(--cn-green-bg);
    color: var(--cn-green-fg);
}

.cn-badge--unregistered {
    background: var(--cn-grey-bg);
    color: var(--cn-grey-fg);
}

.cn-badge--declined {
    background: var(--cn-red-bg);
    color: var(--cn-red-fg);
}

.cn-badge--credits {
    background: var(--jbf-status-info-bg, #e3f2fd);
    color: var(--jbf-status-info-fg, #0d47a1);
}

/* Two-line grid cell: primary value + secondary label/date below */
.cn-cell-primary {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.cn-cell-secondary {
    font-size: 11px;
    color: var(--cn-muted);
    margin-top: 2px;
}

.cn-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

.cn-pill--purple { background: color-mix(in srgb, var(--jbf-plum, #7d5b81) 18%, transparent); color: var(--rz-primary-darker, #58405b); }
.cn-pill--blue { background: var(--jbf-status-info-bg); color: var(--jbf-status-info-fg); }
.cn-pill--pink { background: var(--jbf-status-magenta-bg); color: var(--jbf-status-magenta-fg); }

/* Preview panel */
.cum-preview-root.cn-preview-panel {
    /* Flex column so the inline note-form (see .cn-note-form) can stretch
       vertically and pin its action bar to the bottom of the side-panel
       viewport via position: sticky. min-height:0 is required so the form's
       inner scroller can actually shrink inside this flex container. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cn-preview-panel > .cn-preview-profile,
.cn-preview-panel > .cn-preview-tabs {
    flex: 0 0 auto;
}

.cn-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cum-space-tight, 12px);
    margin-bottom: var(--cum-space-tight, 12px);
    padding-bottom: var(--cum-space-tight, 12px);
    border-bottom: 1px solid var(--cum-border, var(--cn-border));
}

.cn-preview-name {
    display: block;
    font-size: var(--cum-text-preview-title, 18px);
    font-weight: 600;
    color: var(--cum-foreground, #021922);
    line-height: 1.25;
}

.cn-preview-meta-line {
    font-size: var(--cum-text-label, 12px);
    margin-top: 6px;
    color: var(--cum-muted-foreground, var(--cn-muted));
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cn-preview-meta-line--tight {
    margin-top: 2px;
}

.cn-preview-meta-icon {
    flex: 0 0 auto;
    color: var(--cum-muted-foreground, var(--cn-muted));
}

.cn-preview-meta-link {
    color: var(--jbf-link, var(--cum-foreground, #1d4f86));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cn-preview-meta-link:hover,
.cn-preview-meta-link:focus {
    text-decoration: underline;
}

.cn-preview-meta-empty {
    font-style: italic;
    color: var(--cn-muted);
}

.cn-preview-profile {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cn-preview-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a282a6, #7d5b81);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-preview-avatar.cn-preview-avatar--photo {
    display: block;
    object-fit: cover;
    border: 1px solid var(--cn-border);
    background: #eee;
}

.cn-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cn-preview-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.cn-preview-actions .generic-dropdown {
    min-width: 132px;
}

.cn-preview-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--cn-muted);
}

.cn-preview-close:hover {
    background: var(--cn-surface);
    color: #021922;
}

.cn-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--cum-border, var(--cn-border));
    margin-bottom: var(--cum-space-tight, 12px);
}

.cn-preview-tab {
    border: none;
    background: none;
    padding: 10px 14px;
    font-size: var(--cum-text-hint, 13px);
    font-weight: 600;
    color: var(--cum-muted-foreground, var(--cn-muted));
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--cum-font, inherit);
}

.cn-preview-tab--active {
    color: var(--cum-foreground, #021922);
    border-bottom-color: var(--cum-primary, var(--cn-purple));
}

.cn-event-card {
    border: 1px solid var(--cn-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fafafa;
}

.cn-event-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.cn-rate-box {
    background: #eceff1;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}

.cn-rate-box .cn-rate-value {
    font-size: 22px;
    font-weight: 700;
}

/* Legacy stacked footer kept around in case other surfaces still reference it.
   The Consignors side panel itself now uses .cn-preview-action-bar below. */
.cn-preview-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cn-border);
}

.cn-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.cn-quick-action:hover {
    border-color: var(--cn-purple);
    color: var(--cn-purple);
}

/* Quick-action bar at the bottom of the consignor preview panel.
   `position: sticky` pins it to the bottom edge of the parent scroll
   region (.jbf-panel-body has overflow-y:auto - see JbfRightPanel.razor)
   so the user always sees the actions, even when the tab body overflows.
   When the body fits, the action bar simply renders at the natural end
   of the panel content with the same visual treatment.
   Buttons render icon-only and are currently all disabled (placeholder
   entries pending email/SMS/note workflows landing). */
/* Quick-action icon strip rendered into JbfRightPanel's FooterContent slot
   via PaginatedTable.PanelFooterContent (see Consignors.razor.cs →
   RenderConsignorPanelFooter). The wrapping .jbf-panel-footer already pins
   itself with flex-shrink:0 and supplies background, top border, and
   horizontal/vertical padding - so this rule is JUST the inner row layout
   (centered icon buttons with a small gap). Do NOT re-add position:sticky
   or background:#fff here - the previous rule put the icons inside the
   scrolling body and let inventory rows pass behind them, which was the
   exact bug this footer-slot move fixes. */
.cn-preview-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cn-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--cn-border);
    background: #fff;
    color: var(--cn-muted, #6b7280);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.cn-action-icon-btn:hover:not(:disabled),
.cn-action-icon-btn:focus-visible:not(:disabled) {
    border-color: var(--cn-purple);
    color: var(--cn-purple);
    background: #faf6fb;
    outline: none;
}

.cn-action-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Customize modal */
.cn-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 25, 34, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cn-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

/* Narrower variant for picker dialogs (e.g. bulk Assign-to-Group) where the
   body is a single dropdown + short summary - the default 560px feels visually
   over-sized for a one-control dialog. */
.cn-modal--narrow {
    max-width: 420px;
}

.cn-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 22px 12px;
}

.cn-modal-body {
    padding: 0 22px 16px;
    overflow-y: auto;
    flex: 1;
}

.cn-modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--cn-border);
}

.cn-view-toggle {
    display: inline-flex;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.cn-view-toggle button {
    border: none;
    background: #f5f5f5;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--cn-muted);
}

.cn-view-toggle button.cn-view-toggle--on {
    background: #fff;
    color: #021922;
    box-shadow: inset 0 -2px 0 var(--cn-purple);
}

.cn-col-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.cn-col-row--locked {
    opacity: 0.85;
}

.cn-col-drag {
    color: var(--cn-muted);
    font-size: 16px;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.cn-col-drag--locked {
    cursor: default;
    opacity: 0.35;
}

.cn-groups-placeholder {
    padding: 48px 24px;
    text-align: center;
    color: var(--cn-muted);
    border: 1px dashed var(--cn-border);
    border-radius: 10px;
    background: #fafafa;
}

/* No bespoke mobile rule needed for the tab strip: site.css already shrinks
   .jbf-header padding to 16px at this breakpoint. */

/* ──── PR-3b: right-panel Activity / Inventory / Notes tab bodies ──────── */
.cn-tab-loader {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Activity */
.cn-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cn-activity-row {
    border: 1px solid var(--cum-border, #e0e6e8);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--cum-card, #fff);
}
.cn-activity-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--cn-muted);
    margin-bottom: 4px;
}
.cn-activity-row-meta time {
    margin-left: auto;
}
.cn-activity-row-body {
    font-size: 13px;
    color: var(--cum-foreground, #20272a);
}
.cn-activity-kind {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--jbf-status-info-bg, #e8f1ff);
    color: var(--jbf-status-info-fg, #1a4f9c);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cn-activity-kind--registration { background: var(--jbf-status-success-bg, #e6f5ec); color: var(--jbf-status-success-fg, #1f6f43); }
.cn-activity-kind--invitation,
.cn-activity-kind--invitationsent { background: var(--jbf-status-warning-bg, #fff4d9); color: var(--jbf-status-warning-fg, #8a5b00); }
.cn-activity-kind--note,
.cn-activity-kind--noteadded { background: #f0e6f5; color: #6c3a82; }

/* Inventory */
.cn-inv-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.cn-inv-summary-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--cum-border, #e0e6e8);
    border-radius: 8px;
    background: var(--cum-card, #fff);
}
.cn-inv-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cn-muted);
}
.cn-inv-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--cum-foreground, #20272a);
    margin-top: 4px;
}
.cn-inv-cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cn-inv-cat-table th,
.cn-inv-cat-table td {
    text-align: right;
    padding: 6px 8px;
    border-bottom: 1px solid var(--cum-border, #e0e6e8);
}
.cn-inv-cat-table th:first-child,
.cn-inv-cat-table td:first-child {
    text-align: left;
}
.cn-inv-cat-table th {
    font-weight: 600;
    color: var(--cn-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* Notes */
.cn-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cn-note-row {
    border: 1px solid var(--cum-border, #e0e6e8);
    border-left: 3px solid var(--cum-border, #e0e6e8);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--cum-card, #fff);
}
.cn-note-row--pinned {
    border-left-color: var(--jbf-pink, #7d5b81);
    background: #fdf6fa;
}
.cn-note-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--cn-muted);
    margin-bottom: 4px;
}
.cn-note-row-meta time {
    margin-left: auto;
}
.cn-note-row-body {
    font-size: 13px;
    color: var(--cum-foreground, #20272a);
    white-space: pre-wrap;
}
.cn-note-pin {
    font-size: 12px;
}
.cn-note-author {
    font-weight: 600;
}
.cn-note-private {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    background: var(--jbf-status-warning-bg, #fff4d9);
    color: var(--jbf-status-warning-fg, #8a5b00);
    padding: 1px 6px;
    border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────
   PR-A: Right-panel Summary tab + TM chip
   Header chip flagging consignors who also hold a Team Member ULR at this
   location, plus the Summary tab card / table styles. The legacy "Events"
   tab card styles (.cn-event-card / .cn-rate-box) are still used by other
   surfaces and intentionally left untouched.
   ───────────────────────────────────────────────────────────────────────── */
.cn-tm-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--jbf-tag-purple-bg, #efe4f1);
    color: var(--jbf-purple, #5e2a76);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    vertical-align: middle;
}

/* Summary tab - Event mode card */
.cn-summary-card {
    border: 1px solid var(--jbf-border, #e3e3ea);
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cn-summary-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
}
.cn-summary-row--multi {
    align-items: start;
}
.cn-summary-label {
    color: var(--cn-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cn-summary-value {
    color: var(--cum-foreground, #20272a);
}
.cn-summary-subtle {
    color: var(--cn-muted);
    font-weight: 400;
}
.cn-ticket-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.cn-ticket-line:last-child {
    margin-bottom: 0;
}
.cn-ticket-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
}
.cn-ticket-badge--earned {
    background: var(--jbf-status-info-bg, #e6f0fb);
    color: var(--jbf-status-info-fg, #1d4f86);
}
.cn-ticket-badge--purchased {
    background: var(--jbf-status-neutral-bg, #eef0f2);
    color: var(--jbf-status-neutral-fg, #455a64);
}

/* Summary tab - All-Events mode table */
.cn-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.cn-summary-table thead th {
    text-align: left;
    color: var(--cn-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 4px 6px;
    border-bottom: 1px solid var(--jbf-border, #e3e3ea);
}
.cn-summary-table tbody td {
    padding: 6px;
    border-bottom: 1px solid var(--jbf-border-soft, #f0f0f4);
    vertical-align: top;
}
.cn-summary-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status pill - shared between Summary card and Summary table */
.cn-status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    background: var(--jbf-status-neutral-bg, #eef0f2);
    color: var(--jbf-status-neutral-fg, #455a64);
}
.cn-status-pill--confirmed {
    background: #DCF7E6;
    color: #14532D;
}
.cn-status-pill--inprogress,
.cn-status-pill--invited,
.cn-status-pill--pending {
    background: var(--jbf-status-info-bg, #e6f0fb);
    color: var(--jbf-status-info-fg, #1d4f86);
}
.cn-status-pill--cancelled,
.cn-status-pill--abandoned,
.cn-status-pill--expired {
    background: var(--jbf-status-warning-bg, #fff4d9);
    color: var(--jbf-status-warning-fg, #8a5b00);
}
.cn-status-pill--default {
    background: var(--jbf-status-neutral-bg, #eef0f2);
    color: var(--jbf-status-neutral-fg, #455a64);
}

/* ─────────────────────────────────────────────────────────────────────────
   Full-screen consignor profile dialog chrome (PR-B v3).
   The per-row "Open full-screen" icon was retired on 2026-05-14 in favor of
   the page-level fullscreen toggle on the tab strip (which hides the JBFOne
   chrome and gives the side panel the entire viewport). The ConsignorProfile
   FullScreenDialog component itself is still around so /team-members or
   future surfaces can reach it - keep these CSS rules in lockstep with that
   component, NOT with the now-deleted .cn-fullscreen-btn launcher.
   ───────────────────────────────────────────────────────────────────────── */

/* Full-screen modal container. Drops the legacy 1100px-cap centered column -
   the modal is now true fullscreen, so the shell fills the entire dialog
   content area with a flex column layout. titlebar / identity-strip / tabs
   are flex-shrink:0; the tab body absorbs the remaining height. */
.cn-fs-shell {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

/* Identity strip (avatar + name + status + contact) sits BELOW the titlebar
   inside the workspace, so we re-introduce the breathing room the previous
   .cn-fs-shell padding gave us. */
.cn-fs-shell > .cn-fs-header {
    padding: 16px 24px 12px;
}
.cn-fs-shell > .cn-fs-tabs {
    padding: 0 24px;
}
.cn-fs-shell > .cn-fs-body {
    padding: 16px 24px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Three-zone titlebar: start | middle | end ──
   The modal's titlebar uses the existing .eem-checklist-dialog-titlebar
   classes (start/end zones + close button styling) so the visual rhythm
   matches EventChecklistDialog and TeamScheduleBuilderModal. The middle
   zone hosts the prev/next stepper and is consignor-modal specific. */
.cn-fs-titlebar-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Prev/Next stepper. Visual rhythm mirrors .team-sched-date-strip-stepper
   (chevron buttons + center label, pill border, white background) so the
   pattern feels native to the existing fullscreen modals. */
.cn-fs-nav-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--cn-border, #e3dce8);
    background: #fff;
}
.cn-fs-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--cn-purple, #5e2a76);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.cn-fs-nav-btn:hover:not(:disabled) {
    background: var(--cn-purple-soft, #efe4f1);
}
.cn-fs-nav-btn:focus-visible {
    outline: 2px solid var(--cn-purple, #5e2a76);
    outline-offset: 2px;
}
.cn-fs-nav-btn:disabled {
    color: var(--cn-muted, #80828a);
    cursor: not-allowed;
    opacity: 0.55;
}
.cn-fs-nav-btn .rzi {
    font-size: 20px;
    line-height: 1;
}
.cn-fs-nav-label {
    min-width: 64px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--cum-foreground, #20272a);
    white-space: nowrap;
}

/* Identity header inside the modal. Larger avatar and a wider info column
   than the side panel header - admins are usually reviewing this view at
   their desk, not on a phone, so we lean into the available width. */
.cn-fs-header {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cn-border, #e6e8e9);
}
.cn-fs-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cn-purple-soft, #efe4f1);
    color: var(--cn-purple, #5e2a76);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    flex: 0 0 auto;
}
.cn-fs-avatar--photo {
    background: transparent;
    object-fit: cover;
}
.cn-fs-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cn-fs-name {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cum-foreground, #021922);
}
.cn-fs-id-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cn-fs-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--cum-muted-foreground, var(--cn-muted));
}

/* Tab strip - horizontal segmented control matching the corporate-user-mgmt
   .event-admin-tab-toggle visual rhythm so admins recognize the pattern. */
.cn-fs-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cn-border, #e6e8e9);
}
.cn-fs-tab {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.cn-fs-tab:hover { color: var(--cum-foreground, #20272a); }
.cn-fs-tab--active {
    color: var(--cn-purple, #5e2a76);
    border-bottom-color: var(--cn-purple, #5e2a76);
}

/* Tab body. flex:1 + min-height:0 so the body absorbs remaining viewport
   height inside the JbfDialogShell scroll region. */
.cn-fs-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cn-fs-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cn-fs-section-title {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cum-foreground, #20272a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cn-fs-empty {
    color: var(--cn-muted);
    font-size: 13px;
    margin: 8px 0;
}
.cn-fs-helper {
    color: var(--cn-muted);
    font-size: 12px;
    margin-top: 8px;
}

/* KPI strip - small dashboard-style cards used on Summary / Inventory /
   Payouts panes. Fixed-width cards so multiple KPIs sit side-by-side. */
.cn-fs-kpi-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cn-fs-kpi {
    border: 1px solid var(--cn-border, #e6e8e9);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 140px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cn-fs-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cn-muted);
}
.cn-fs-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--cum-foreground, #021922);
}

/* Wider workspace tables. Larger cell padding than the side panel summary
   table so dense per-event data is readable. The .num modifier right-aligns
   numeric columns (counts, money). */
.cn-fs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cn-fs-table thead th {
    text-align: left;
    color: var(--cn-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--jbf-border, #e3e3ea);
}
.cn-fs-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--jbf-border-soft, #f0f0f4);
    vertical-align: top;
}
.cn-fs-table tbody tr:last-child td { border-bottom: none; }
.cn-fs-table .num { text-align: right; }
.cn-fs-table thead th.num { text-align: right; }

@media (max-width: 768px) {
    .cn-fs-shell > .cn-fs-header { padding: 12px 16px 8px; }
    .cn-fs-shell > .cn-fs-tabs { padding: 0 16px; }
    .cn-fs-shell > .cn-fs-body { padding: 12px 16px 20px; }
    .cn-fs-header { flex-direction: column; align-items: flex-start; }
    .cn-fs-avatar { width: 48px; height: 48px; font-size: 18px; }
    .cn-fs-name { font-size: 18px; }
    .cn-fs-tab { padding: 8px 10px; font-size: 12px; }
    .cn-fs-kpi { min-width: 110px; padding: 10px 12px; }
    .cn-fs-kpi-value { font-size: 16px; }

    /* Stepper compresses on narrow screens - counter shrinks, buttons stay
       tappable. Hides the "Location: ..." span on the titlebar so the
       three zones fit within the viewport. */
    .cn-fs-nav-label { min-width: 48px; font-size: 12px; }
    .cn-fs-nav-btn { width: 26px; height: 26px; }
    .jbf-consignor-fullscreen .eem-checklist-dialog-location { display: none; }
}

/* ── Radzen dialog wrapper: make the consignor fullscreen modal truly full
   viewport (no border-radius, no padding, flex column) so the inner
   .cn-fs-shell can absorb the entire dialog content area. Mirrors the
   .jbf-event-checklist-fullscreen rules in event-checklist-dialog.css. */
.jbf-consignor-fullscreen.rz-dialog-wrapper {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}
.jbf-consignor-fullscreen .rz-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
}
.jbf-consignor-fullscreen .rz-dialog-titlebar {
    display: none !important;
}
.jbf-consignor-fullscreen .rz-dialog-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}
.jbf-consignor-fullscreen .rz-dialog-content > .cn-fs-shell {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
/* Override the base flex layout (start has flex:1, middle hugs right) with a
   3-column grid so the navigator is truly centered on the header. Start / end
   columns share equal weight (1fr); middle is its natural width. When the
   stepper is hidden the middle column collapses to 0 and start/end still pin
   to the corners - same visual outcome as the base flex layout. */
.jbf-consignor-fullscreen .eem-checklist-dialog-titlebar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
}
.jbf-consignor-fullscreen .eem-checklist-dialog-titlebar-start {
    flex: initial;
    min-width: 0;
    justify-self: start;
}
.jbf-consignor-fullscreen .cn-fs-titlebar-middle {
    justify-self: center;
}
.jbf-consignor-fullscreen .eem-checklist-dialog-titlebar-end {
    justify-self: end;
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
    .cn-page.jbf-page > .event-admin-tab-strip {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Event dropdown two-row option layout.
   Renders inside the RadzenDropDown <Template> for the toolbar event picker:
   row 1 = event name (regular weight, picks up Radzen's default colour),
   row 2 = date range · status (smaller, muted) so an admin can disambiguate
   recurring events without needing the name to encode the date.
   --------------------------------------------------------------------------- */
.cn-event-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}

.cn-event-option__name {
    font-size: 0.9375rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ValueTemplate variant: rendered inside the dropdown's collapsed trigger.
   The trigger already has its own padding + line-height, so we just need a
   plain inline-block that doesn't introduce a second baseline. */
.cn-event-option__name--trigger {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    line-height: inherit;
}

.cn-event-option__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cn-muted, #808c91);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-event-option__sep {
    opacity: 0.6;
}

.cn-event-option__status {
    text-transform: capitalize;
}

/* ─────────────────────────────────────────────────────────────────────────
   Notes tab v2 (added 2026-05-15 with the consignor_notes_add_edit feature)
   Adds the inline add/edit form, attachment chips, body-preview "Show more"
   expansion, and per-row status pill that the PaginatedTable rows render.
   The legacy .cn-note-row / --pinned styles above stay in place because the
   /team-members notes tab still uses the old <ul> shape; once that page is
   ported these styles can subsume the older ones.
   ───────────────────────────────────────────────────────────────────────── */
/* Form fills the available height of the side panel and uses an inner
   scroll region (.cn-note-form__scroll) so the action bar can stay pinned
   to the bottom even when the body editor / attachment list grows. The
   parent .cn-preview-panel is already a flex column - we lean on that to
   own the available height. min-height:0 is required on the form (and on
   __scroll) to make the inner scroller actually shrink inside its flex
   parent on browsers that otherwise resolve flex children to content size. */
.cn-note-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 4px 2px 0;
}
.cn-note-form__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 12px;
    /* Leave a little gutter so a tall body editor doesn't crash into the
       sticky action bar's top border on the way down. */
    margin-bottom: 4px;
}
.cn-note-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cn-note-form__note {
    margin: 6px 0 0;
    font-size: 11px;
    font-style: italic;
    color: var(--cn-muted, #6b7280);
}
.cn-note-form__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cum-foreground, #20272a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cn-note-form__radio-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cn-note-form__radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--cum-foreground, #20272a);
    cursor: pointer;
}
.cn-note-form__radio input[type="radio"] {
    margin-top: 3px;
}
.cn-note-form__radio small {
    display: block;
    color: var(--cn-muted, #6b7280);
    font-size: 11px;
    font-weight: 400;
    margin-top: 1px;
}
.cn-note-form__inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cum-foreground, #20272a);
    cursor: pointer;
}
.cn-note-form__file-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 6px 12px;
    border: 1px dashed var(--jbf-border, #d3d3dd);
    border-radius: 6px;
    background: #fafafa;
    color: var(--jbf-purple, #5e2a76);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cn-note-form__file-pick:hover {
    background: #f4ecf7;
    border-color: var(--jbf-purple, #5e2a76);
}
.cn-note-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
/* Pinned to the bottom of the panel via flex-shrink:0 inside the
   flex-column .cn-note-form. Wrapped in a top border + opaque background
   + soft drop shadow so the scrolled body content reads as passing
   underneath rather than competing with the action bar for the same
   horizontal band. Negative horizontal margin extends the bar edge-to-
   edge of the panel so the border + shadow span the full width without
   needing to relayout the parent's padding. */
.cn-note-form__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0 -16px;
    border-top: 1px solid var(--jbf-border, #e3e3ea);
    background: var(--cum-card, #fff);
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
}
.cn-note-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}
.cn-note-attachments__empty {
    font-size: 12px;
    color: var(--cn-muted, #6b7280);
    font-style: italic;
}
.cn-note-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 12px;
    color: #1e293b;
    max-width: 240px;
}
.cn-note-attachment-chip--uploading {
    background: #fff8e6;
    border-color: #f3d579;
}
.cn-note-attachment-chip__icon {
    font-size: 13px;
    line-height: 1;
}
.cn-note-attachment-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.cn-note-attachment-chip__name--error {
    color: #b91c1c;
}
.cn-note-attachment-chip__size {
    color: var(--cn-muted, #6b7280);
    font-size: 11px;
}
.cn-note-attachment-chip__remove {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.cn-note-attachment-chip__remove:hover {
    color: #b91c1c;
}

/* Notes-grid cells */
.cn-note-body-preview {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.cn-note-show-more {
    background: none;
    border: none;
    color: var(--cum-foreground, #20272a);
    cursor: pointer;
    text-align: left;
    font: inherit;
    padding: 0;
    line-height: 1.4;
    text-decoration: none;
}
.cn-note-show-more:hover {
    color: var(--jbf-purple, #5e2a76);
    text-decoration: underline;
}
/* Far-right pencil + trashcan action cell on each Notes-grid row. The
   PaginatedTable cell is constrained to 92px so the two RadzenButtons sit
   tight together and don't bleed into the visibility chip on a narrow
   panel. The buttons themselves use the standard PencilIcon / TrashIcon
   per .cursor/rules/ui-css-consistency.mdc - we just need the right
   alignment + a small gap. */
.cn-note-row-actions-cell {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}
.cn-note-row-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}
.cn-note-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.3;
}
.cn-note-meta-cell strong {
    font-weight: 600;
    color: var(--cum-foreground, #20272a);
    font-size: 12px;
}
.cn-note-meta-cell small {
    color: var(--cn-muted, #6b7280);
    font-size: 11px;
}
.cn-note-meta-cell__edited {
    color: var(--jbf-purple, #5e2a76);
    font-style: italic;
}
/* Posted column is intentionally narrow (140px) so the Note column can
   absorb the remaining horizontal space; long display names wrap onto a
   second line rather than blowing the column out. */
.cn-note-meta-cell-col {
    white-space: normal;
}
.cn-note-meta-cell-col .cn-note-meta-cell strong {
    overflow-wrap: anywhere;
}
.cn-note-status-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cn-note-status-chip--public {
    background: #e6f4ea;
    color: #1f7a3d;
}
.cn-note-status-chip--private {
    background: #fff4d9;
    color: #8a5b00;
}
/* Inline chip variant: rendered as the last stacked element inside the
   Posted column's meta cell (replacing the dedicated Visibility column).
   align-self:flex-start keeps the pill from stretching to the column width;
   the small top margin separates it from the date / "edited by" line above. */
.cn-note-status-chip--inline {
    align-self: flex-start;
    margin-top: 4px;
}

/* Full-note detail view: takes over the Notes tab body in place of the
   grid (NOT below it). Click "Show more" on a row to enter, X to return.
   Uses flex column so the body content can grow / scroll independently of
   the sticky header + attachment footer the same way the inline note form
   does. */
.cn-note-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--jbf-border, #e3e3ea);
    border-radius: 8px;
    background: #fff;
}
.cn-note-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--jbf-border, #e3e3ea);
    background: #fafafa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.cn-note-detail__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cn-note-detail__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cn-note-detail__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cn-muted, #6b7280);
    font-size: 20px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 4px;
}
.cn-note-detail__close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #20272a;
}
.cn-note-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--cn-muted, #6b7280);
    border-bottom: 1px solid var(--jbf-border, #e3e3ea);
}
.cn-note-detail__meta strong {
    color: #20272a;
}
.cn-note-detail__edited {
    font-style: italic;
}
.cn-note-detail__content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--cum-foreground, #20272a);
    line-height: 1.5;
}
.cn-note-detail__content p { margin: 0 0 6px; }
.cn-note-detail__content ul,
.cn-note-detail__content ol { margin: 4px 0 4px 20px; }
.cn-note-detail__attachments {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-top: 1px solid var(--jbf-border, #e3e3ea);
    background: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.cn-note-detail__attachments strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--cn-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cn-note-detail__attachments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cn-note-detail__attachments li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}
.cn-note-detail__attachments small {
    color: var(--cn-muted, #6b7280);
}

.cn-action-icon-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}