@layer infine.components {
/* =============================================================
   RC supplier roster — landing view for category managers.
   Calm Mantine table, single-select filter chips, twin completeness bars.
   ============================================================= */

.connect-roster-page {
    width: 100%;
    flex: 1 1 100%;
    /* Horizontal spacing is owned by inner elements (xl on each side) so the
       sticky filter toolbar — which lives inside common/sticky-bar and adds
       its own xl padding — can span edge-to-edge when stuck. Mirrors the
       .connect-grid-wrap pattern used by the product grid. */
    padding: 32px 0 64px;
    color: var(--infine-blue);
    font-family: var(--mantine-font-family);
}

/* --- Bulk-edit CTA — sits in the sticky toolbar's right cluster --- */

.connect-roster-bulk-cta {
    margin-left: var(--mantine-spacing-md);
}

/* Clear-all-filters X sits rightmost on the filter row so the affordance is
   always in the same place regardless of which filters are active. */
.connect-roster-clear-all {
    margin-left: auto;
}

/* --- Roster drill-in helper --- */
/* Calm inline tip. Earlier the click into a row swapped the user's identity
   onto the supplier, so the affordance needed a heavy framed callout. The
   action is now just a navigation into an editable subview, so the helper
   becomes a quiet two-line note in the page flow — no surface, no border,
   no icon circle. The icon stays as a small inline glyph that ties the tip
   to the row-hover hint. */

.connect-sudo-jump-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px var(--mantine-spacing-xl) 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--infine-blue);
}

/* Icon is sized to match the height of the two text lines next to it.
   Sub is sm (14px) line-height ~1.45 = ~20px; title is sm bold ~20px.
   Total ~40px stacked; 36px keeps the icon visually anchored without
   towering over the text. */
.connect-sudo-jump-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: var(--infine-blue-bright);
    background: transparent;
    border: none;
    border-radius: 0;
}

.connect-sudo-jump-cta__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.connect-sudo-jump-cta__title {
    font-family: var(--mantine-font-family);
    font-weight: 600;
    font-size: var(--mantine-font-size-sm);
    line-height: 1.4;
    color: var(--infine-blue);
}

.connect-sudo-jump-cta__sub {
    font-size: var(--mantine-font-size-sm);
    line-height: 1.45;
    color: var(--mantine-color-gray-7);
}

.connect-sudo-jump-cta__sub strong {
    font-weight: 600;
    color: var(--infine-blue);
}

/* --- Counts meta --- */

.connect-roster-meta {
    color: var(--mantine-color-gray-6);
    font-size: var(--mantine-font-size-sm);
    margin-bottom: 8px;
}

/* --- Table --- */

.connect-roster-table {
    /* The wrapper provides no horizontal padding so the sticky toolbar can
       span full width; the table gets its own xl margin to align with the
       toolbar's inset content. `display: table` shrink-to-fits by default,
       so use calc() to claim the full available width minus those margins. */
    width: calc(100% - 2 * var(--mantine-spacing-xl));
    margin: 0 var(--mantine-spacing-xl);
}

.connect-roster-table thead th {
    color: var(--mantine-color-gray-7);
    font-size: var(--mantine-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 1px solid var(--infine-blue-light-fade);
}

/* Sortable header cells — click anywhere in the cell to toggle sort.
   The chevron sits inline next to the label and only shows colour when the
   column is the active sort target. Hovering darkens the label so the
   affordance is obvious. */
.connect-roster-th {
    user-select: none;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.connect-roster-th .connect-roster-th__label,
.connect-roster-th__label {
    display: inline-block;
    margin-right: 4px;
}

.connect-roster-th__indicator {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.connect-roster-th__indicator--idle {
    opacity: 0;
}

.connect-roster-th:hover .connect-roster-th__indicator--idle {
    opacity: 0.5;
    color: var(--mantine-color-gray-6);
}

.connect-roster-th--active {
    color: var(--infine-blue);
}

.connect-roster-th--active .connect-roster-th__indicator {
    opacity: 1;
    color: var(--infine-blue-bright);
}

.connect-roster-th:hover {
    color: var(--infine-blue);
    background-color: var(--infine-blue-bg);
}

.connect-roster-table tbody tr {
    cursor: pointer;
    /* Left-edge marker shown on hover to flag the context-switch on click.
       Implemented as an inline-start box-shadow on the row's cells so it
       doesn't shift the row layout — see the .connect-roster-row:hover td
       rule below. */
    position: relative;
}

.connect-roster-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid var(--mantine-color-gray-1);
}

/* Hover state: subtle blue tint + a left-edge blue-bright stripe so the
   row reads as "about to switch context" rather than just "highlight". */
.connect-roster-table tbody tr.connect-roster-row:hover td {
    background-color: var(--infine-blue-bg);
}
.connect-roster-table tbody tr.connect-roster-row:hover td:first-child {
    box-shadow: inset 3px 0 0 0 var(--infine-blue-bright);
}

.connect-roster-cell-name {
    min-width: 220px;
    /* The whole row is the click target, so make the name cell read as
       clickable too. */
    cursor: pointer;
}

.connect-roster-row {
    cursor: pointer;
}

.connect-roster-name {
    font-weight: 600;
    color: var(--infine-blue);
    font-size: var(--mantine-font-size-sm);
}

/* Counter cell — mirrors the product-grid open-renderer pattern:
   resting state shows a light row number in a technical mono face; row
   hover fades it out and reveals the pencil glyph in the same slot,
   telegraphing click-to-edit without consuming any space in the name
   cell. Pure-CSS swap because Mantine Table renders one contiguous <tr>
   (no AG-Grid-style pinned splits to coordinate). */
.connect-roster-th-counter {
    width: 44px;
    padding: 0;
}

.connect-roster-cell-counter {
    position: relative;
    width: 44px;
    text-align: center;
    vertical-align: middle;
}

.connect-roster-open-num {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    line-height: 1;
    color: var(--mantine-color-gray-5);
    transition: opacity 120ms ease;
}

.connect-roster-open-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    color: var(--infine-blue-bright);
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.connect-roster-row:hover .connect-roster-open-num { opacity: 0; }
.connect-roster-row:hover .connect-roster-open-icon { opacity: 1; }

.connect-roster-pagination {
    display: flex;
    justify-content: center;
    padding: 16px var(--mantine-spacing-xl);
}

.connect-roster-type-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--infine-blue-bg);
    border-radius: 999px;
    color: var(--infine-blue);
    font-size: var(--mantine-font-size-xs);
    font-weight: 500;
}

.connect-roster-cell-category {
    color: var(--mantine-color-gray-7);
    font-size: var(--mantine-font-size-sm);
}

.connect-roster-cell-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mantine-color-gray-7);
}

/* Status cell */

.connect-roster-status__line {
    display: inline-flex;
    align-items: baseline;
    gap: var(--mantine-spacing-xs);
}

.connect-roster-status__label {
    font-weight: 600;
    color: var(--infine-blue);
    font-size: var(--mantine-font-size-sm);
}

/* Extras (e.g. "3 users · active 2d ago") ride on the same row as the
   status label but stay in a lower hierarchy so the eye lands on
   "Active" first. */
.connect-roster-status__extra {
    color: var(--mantine-color-gray-6);
    font-size: var(--mantine-font-size-xs);
}

.connect-roster-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mantine-color-gray-4);
    display: inline-block;
    flex-shrink: 0;
}

.connect-roster-dot--active      { background: var(--infine-green-bright); }
.connect-roster-dot--invited     { background: var(--infine-yellow-strong); }
.connect-roster-dot--not-invited { background: var(--mantine-color-gray-4); }

/* Completeness bars — now split into two adjacent columns (one for Company
   data, one for Product data), so each cell holds a single bar. */

.connect-roster-cell-completeness {
    min-width: 140px;
    width: 160px;
}

.connect-roster-completeness {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.connect-roster-completeness--single {
    /* Single-bar variant collapses any historical vertical gap. */
    gap: 0;
}

.connect-roster-pct-na {
    color: var(--mantine-color-gray-5);
    font-variant-numeric: tabular-nums;
}

/* Red error-count pill for the roster's Errors column. Standalone class
   (not reusing `.connect-grid-error-count`, which is scoped inside the
   AG Grid host) so it's free to evolve without touching the grid. Red is
   reserved for validator errors — see memory `feedback_red_for_errors_only`. */
.connect-roster-error-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: white;
    background-color: var(--infine-red-bright);
}

/* Roster completeness bar — bar + percentage on a single row, matching the
   `.connect-grid-status` shape used by the products grid so the two
   completion signals rhyme across surfaces. */
.connect-roster-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.connect-roster-bar__pct {
    /* Tech caption that rides next to the bar — tabular mono keeps digits
       aligned column-to-column so the eye scans the whole stack of rows
       cleanly. Quiet grey defers to the bar as the primary signal. */
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    color: var(--mantine-color-gray-6);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.connect-roster-bar__track {
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    background: var(--mantine-color-gray-2);
    border-radius: 3px;
    overflow: hidden;
}

.connect-roster-bar__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--mantine-color-gray-4);
    transition: width 200ms ease, background-color 200ms ease;
}

/* Completeness bars use yellow-until-full + green-at-full, with the SAME
   bright yellow + bright green used by the products-grid status cell so
   the two surfaces look like siblings. Red was dropped from the low band
   so the colour stays available for validator errors only (see memory
   `feedback_red_for_errors_only`). The 4 bands are kept in the CSS rather
   than collapsed in `pct-band` so a future palette change can re-introduce
   gradation without touching the cljs. */
.connect-roster-bar__fill--low  { background: var(--infine-yellow-bright); }
.connect-roster-bar__fill--mid  { background: var(--infine-yellow-bright); }
.connect-roster-bar__fill--high { background: var(--infine-yellow-bright); }
.connect-roster-bar__fill--full { background: var(--infine-green-bright); }

/* Empty state */

.connect-roster-empty {
    padding: 48px;
    text-align: center;
    color: var(--mantine-color-gray-7);
    border: 1px dashed var(--infine-blue-light-fade);
    border-radius: 8px;
    background: var(--infine-blue-bg-tint);
    margin: 0 var(--mantine-spacing-xl);
}
}