/* 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; }
}

/* 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-advanced-panel {
    flex-shrink: 0;
}

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

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

.cn-search-wrap {
    /* Tightened so the Import / Export / Add-Consignor cluster on the right keeps
       its row real-estate. The search field used to greedily grow up to 420px and
       push the action cluster onto a second row on common laptop widths. */
    flex: 0 1 240px;
    min-width: 160px;
    max-width: 280px;
}

.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;
}

.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 {
    min-height: 0;
}

.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;
}

.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);
}

/* 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);
}

.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);
}

/* ─────────────────────────────────────────────────────────────────────────
   PR-B v3: Full-screen workspace launcher + modal chrome
   The icon-only button in the side-panel header launches
   ConsignorProfileFullScreenDialog. The dialog uses the same fullscreen
   shell pattern as EventChecklistDialog / TeamScheduleBuilderModal - true
   100vw x 100dvh, no Radzen titlebar, custom eem-checklist-dialog-titlebar
   header - so admins recognize the multi-tab workspace pattern across the
   product.
   ───────────────────────────────────────────────────────────────────────── */
.cn-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 32px;
    height: 32px;
    color: var(--cn-purple, #5e2a76);
    background: #fff;
    border: 1px solid var(--cn-purple, #5e2a76);
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    margin-right: 6px;
    box-sizing: border-box;
}
.cn-fullscreen-btn:hover {
    background: #faf8fb;
}
.cn-fullscreen-btn:focus-visible {
    outline: 2px solid var(--cn-purple, #5e2a76);
    outline-offset: 2px;
}
.cn-fullscreen-btn svg {
    flex-shrink: 0;
}

/* 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;
    }
}