/* List rhythm follows Membria's MemberListIsland, MbFilterBar and MbDataGrid.
   Radzen 12 grid/pager structure is scoped here; touch targets are 44 px. */
.eo-list-panel {
    display: flex;
    flex-direction: column;
    gap: var(--mb-space-3);
    min-width: 0;
    max-width: 100%;
}

.eo-list-toolbar { display: grid; gap: var(--mb-space-2); min-width: 0; }
.eo-list-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mb-space-2) var(--mb-space-4);
    min-width: 0;
}
.eo-list-search {
    display: flex;
    flex: 1 1 22rem;
    align-items: center;
    gap: var(--mb-space-2);
    max-width: 40rem;
    min-width: 0;
    margin: 0;
}
.eo-list-search-field { position: relative; flex: 1; min-width: 0; }
.eo-list-search-field > .eo-icon {
    position: absolute;
    top: 13px;
    left: var(--mb-space-3);
    width: 18px;
    height: 18px;
    color: var(--mb-text-2);
    pointer-events: none;
}
.eo-list-search-field input {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 var(--mb-space-3) 0 38px;
    border-color: var(--mb-border-control);
    border-radius: var(--mb-radius);
    background: var(--mb-surface);
    font-size: 16px;
}
.eo-list-search-field input::placeholder { color: var(--mb-text-2); font-size: var(--mb-fs-sm); opacity: 1; }
.eo-list-count { margin-left: auto; color: var(--mb-text-2); font-size: var(--mb-fs-sm); font-variant-numeric: tabular-nums; }
.eo-list-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-space-2); min-width: 0; }
.eo-list-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--mb-space-2);
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding-left: var(--mb-space-3);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius);
    background: var(--mb-surface);
    color: var(--mb-text-2);
    font-size: var(--mb-fs-sm);
}
.eo-list-filter > span { flex: none; }
.eo-list-filter select {
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    border: 0;
    padding: 0 36px 0 0;
    background-color: transparent;
    color: var(--mb-text);
    font-size: 16px;
}
.eo-list-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--mb-space-2);
    min-height: 44px;
    padding: 0 var(--mb-space-3);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius);
    background: var(--mb-surface);
    color: var(--mb-text);
    font-size: var(--mb-fs-sm);
}
.eo-list-toggle label { cursor: pointer; }
.eo-list-clear {
    min-height: 44px;
    padding: 0 var(--mb-space-3);
    border: 0;
    border-radius: var(--mb-radius);
    background: transparent;
    color: var(--mb-primary);
    font-size: var(--mb-fs-sm);
    font-weight: 500;
}
.eo-list-clear:hover { background: var(--mb-primary-soft); }
.eo-list-note { margin-top: var(--mb-space-3); color: var(--mb-text-2); font-size: var(--mb-fs-xs); line-height: 1.5; }
.eo-grid-hint { display: none; margin: 0; color: var(--mb-text-2); font-size: var(--mb-fs-xs); line-height: 1.4; }

.eo-grid {
    --rz-grid-shadow: none;
    --rz-grid-border-radius: 0;
    --rz-grid-background-color: var(--mb-surface);
    --rz-grid-header-background-color: var(--mb-surface-2);
    --rz-grid-header-color: var(--mb-text-2);
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-title-padding-inline: 0;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-line-height: 14px;
    --rz-grid-header-cell-padding: 6px 12px;
    --rz-grid-cell-padding: 8px 12px;
    --rz-grid-cell-font-size: var(--mb-fs-sm);
    --rz-grid-cell-line-height: 1.45;
    --rz-grid-cell-color: var(--mb-text);
    --rz-grid-cell-border: 1px solid var(--mb-border);
    --rz-grid-header-cell-border: 0;
    --rz-grid-header-cell-border-bottom: 1px solid var(--mb-border);
    --rz-grid-bottom-cell-border: 1px solid var(--mb-border);
    --rz-grid-right-cell-border: 0;
    --rz-grid-hover-background-color: var(--mb-surface-2);
    --rz-grid-hover-color: var(--mb-text);
    --rz-grid-data-border-shadow: none;
    --rz-pager-padding: 9px 14px;
    --rz-pager-border: 1px solid var(--mb-border);
    --rz-pager-background-color: var(--mb-surface);
    --rz-pager-summary-font-size: var(--mb-fs-xs);
    --rz-pager-summary-color: var(--mb-text-2);
    --rz-pager-button-border-radius: var(--mb-radius);
    --rz-pager-back-button-background-color: transparent;
    --rz-pager-next-button-background-color: transparent;
    --rz-pager-back-button-color: var(--mb-text);
    --rz-pager-next-button-color: var(--mb-text);
    --rz-pager-numeric-button-background-color: transparent;
    --rz-pager-numeric-button-color: var(--mb-text);
    --rz-pager-numeric-button-border: 1px solid transparent;
    --rz-pager-numeric-button-selected-background-color: var(--mb-primary-soft);
    --rz-pager-numeric-button-selected-color: var(--mb-primary-strong);
    --rz-pager-numeric-button-selected-border: 1px solid var(--mb-primary);
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    background: var(--mb-surface);
    box-shadow: var(--mb-shadow);
    overflow: clip;
}
.eo-grid .rz-datatable { min-width: 0; max-width: 100%; border: 0; border-radius: 0; }
.eo-grid .rz-data-grid-data {
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--mb-border-strong) transparent;
    scrollbar-width: thin;
}
.eo-grid .rz-grid-table { width: 100%; min-width: var(--eo-grid-min-width, 760px); table-layout: fixed; }
.eo-grid .rz-grid-table thead th { height: 44px; letter-spacing: .04em; text-transform: uppercase; }
.eo-grid .rz-grid-table thead th .rz-column-title-content { white-space: normal; }
.eo-grid .rz-grid-table td { height: 60px; vertical-align: middle; }
.eo-grid .rz-grid-table td .rz-cell-data { white-space: normal; overflow-wrap: anywhere; }
.eo-grid .cell-title { display: block; margin: 0; color: var(--mb-text); font-size: var(--mb-fs-sm); font-weight: 500; line-height: 1.45; }
.eo-grid a.cell-title { display: inline-flex; align-items: center; min-height: 24px; color: var(--mb-primary); }
.eo-grid .cell-sub { display: block; margin-top: 2px; color: var(--mb-text-2); font-size: var(--mb-fs-xs); line-height: 1.4; overflow-wrap: anywhere; }
.eo-grid .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.eo-grid .status-pill { max-width: 100%; white-space: normal; padding: 3px 8px; font-size: var(--mb-fs-xs); line-height: 1.4; }
.eo-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--mb-space-2); }
.eo-grid :is(.rz-button,.button) { min-height: 44px; padding: 0 var(--mb-space-3); font-size: var(--mb-fs-sm); font-weight: 500; white-space: nowrap; }
.eo-grid .rz-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mb-space-2) var(--mb-space-4); }
.eo-grid .rz-pager-summary { flex: 1 1 10rem; padding: 0; text-align: left; }
.eo-grid .rz-pager-pages { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; }
.eo-grid .rz-pager-item { flex: none; grid-column: auto; margin: 0; }
.eo-grid :is(.rz-pager-element,.rz-pager-page) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: var(--mb-fs-sm); }
.eo-grid :is(.rz-pager-prev,.rz-pager-next) { margin: 0; }

/* Keep row identity visible while a tablet scrolls the grid horizontally.
   Only ordinary cells participate: empty, expanded and spanning rows do not. */
@media (min-width:768px) and (max-width:1023.98px) {
    .eo-grid .rz-grid-table > thead > tr > th:first-child:is(:not([colspan]), [colspan="1"]),
    .eo-grid .rz-grid-table > tbody > tr.rz-data-row > td:first-child:is(:not([colspan]), [colspan="1"]) {
        position: sticky;
        left: 0;
        border-right: 1px solid var(--mb-border-strong);
    }
    .eo-grid .rz-grid-table > thead > tr > th:first-child:is(:not([colspan]), [colspan="1"]) {
        z-index: 3;
        background-color: var(--rz-grid-header-background-color);
    }
    .eo-grid .rz-grid-table > tbody > tr.rz-data-row > td:first-child:is(:not([colspan]), [colspan="1"]) {
        z-index: 1;
        /* Radzen selection can be translucent; a solid base stops other cells
           showing through without changing row colours or existing shadows. */
        background-color: var(--rz-grid-background-color);
        background-image: linear-gradient(var(--eo-grid-pinned-tint, transparent), var(--eo-grid-pinned-tint, transparent));
    }
    .eo-grid .rz-grid-table-striped > tbody > tr.rz-data-row:nth-child(even) {
        --eo-grid-pinned-tint: var(--rz-grid-stripe-background-color);
    }
    .eo-grid .rz-grid-table-striped > tbody > tr.rz-data-row:nth-child(odd) {
        --eo-grid-pinned-tint: var(--rz-grid-stripe-odd-background-color);
    }
    .eo-grid .rz-grid-table > tbody > tr.rz-data-row.notification-failed-row {
        --eo-grid-pinned-tint: var(--mb-danger-soft);
    }
    .eo-grid :where(.rz-selectable) .rz-grid-table > tbody > tr.rz-data-row:hover:not(.rz-state-highlight) {
        --eo-grid-pinned-tint: var(--rz-grid-hover-background-color);
    }
    .eo-grid :where(.rz-selectable) .rz-grid-table > tbody > tr.rz-data-row.rz-state-highlight {
        --eo-grid-pinned-tint: var(--rz-grid-selected-background-color);
    }
    .eo-grid .rz-grid-table > tbody > tr.rz-data-row.rz-state-focused {
        --eo-grid-pinned-tint: var(--rz-grid-cell-focus-background-color);
    }
}

@media(max-width:1023.98px) {
    .eo-grid-hint { display: block; }
}
@media(max-width:640px) {
    .eo-list-search { flex-basis: 100%; max-width: none; }
    .eo-list-count { margin-left: 0; }
    .eo-list-filter { flex-wrap: wrap; }
    .eo-grid .rz-pager { padding: var(--mb-space-2) var(--mb-space-3); }
    .eo-grid .rz-pager-summary { flex-basis: 100%; }
    .eo-grid .rz-pager-pages { justify-content: flex-start; }
}

/* Compact desktop tables opt into this through their shared grid wrapper.
   Pages provide 4–5 percentage columns and group secondary values in the cell. */
@media(min-width:1024px) {
    .eo-grid .rz-grid-table { width: 100%; min-width: 0; table-layout: fixed; }
    .eo-grid .rz-grid-table thead th { overflow-wrap: anywhere; }
    .eo-grid .rz-grid-table .num { white-space: normal; overflow-wrap: anywhere; }
    .eo-grid .rz-column-title-content { min-width: 0; overflow: visible; text-overflow: clip; }
    .eo-grid .eo-row-actions { flex-wrap: wrap; }
    .eo-grid :is(.rz-button, .button) { max-width: 100%; height: auto; white-space: normal; }
    .eo-grid .rz-button :is(.rz-button-box, .rz-button-text) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .eo-grid .rz-button .rz-button-box { padding-block: 6px; }
}
.eo-grid .cell-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eo-grid .cell-meta { display: block; color: var(--mb-text-2); font-size: var(--mb-fs-xs); line-height: 1.45; overflow-wrap: anywhere; }
.eo-grid .eo-row-details { min-width: 0; font-size: var(--mb-fs-xs); line-height: 1.5; }
.eo-grid .eo-row-details > summary { min-height: 44px; padding-block: 12px; color: var(--mb-primary); font-size: var(--mb-fs-sm); font-weight: 500; cursor: pointer; }
.eo-grid .eo-row-details[open] > summary { margin-bottom: var(--mb-space-1); }
.eo-grid .eo-row-details > :not(summary) { overflow-wrap: anywhere; }
.eo-grid .eo-row-details dl { display: grid; gap: var(--mb-space-2); margin: 0 0 var(--mb-space-2); }
.eo-grid .eo-row-details dt { color: var(--mb-text-2); font-weight: 400; }
.eo-grid .eo-row-details dd { margin: 0; color: var(--mb-text); }

/* The scroll aid is added only when a real data viewport overflows. Its
   controls sit above the table, so no data, link or row action is covered. */
.eo-grid-scroll-enhanced { position: relative; }
.eo-grid-scroll-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mb-space-2);
    min-width: 0;
    padding: 2px var(--mb-space-3);
    border-bottom: 1px solid var(--mb-border);
    background: var(--mb-surface);
}
.eo-grid-scroll-controls[hidden], .eo-grid-scroll-edges[hidden] { display: none; }
.eo-grid-scroll-label { color: var(--mb-text-2); font-size: var(--mb-fs-xs); line-height: 1.4; }
.eo-grid-scroll-actions { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.eo-grid-scroll-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--mb-border-control);
    border-radius: var(--mb-radius);
    background: var(--mb-surface);
    color: var(--mb-primary);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.eo-grid-scroll-button:hover:not(:disabled) { background: var(--mb-primary-soft); border-color: var(--mb-primary); }
.eo-grid-scroll-button:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 2px; }
.eo-grid-scroll-button:disabled { color: var(--mb-text-2); opacity: .4; cursor: default; }
.eo-grid-scroll-edges { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; }
.eo-grid-scroll-edges::before, .eo-grid-scroll-edges::after {
    content: '';
    position: absolute;
    inset-block: 0;
    width: 16px;
    opacity: 0;
    pointer-events: none;
}
.eo-grid-scroll-edges::before {
    left: var(--eo-grid-pinned-width, 0px);
    background: linear-gradient(to right, rgb(38 51 71 / 13%), transparent);
}
.eo-grid-scroll-edges::after { right: 0; background: linear-gradient(to left, rgb(38 51 71 / 13%), transparent); }
.eo-grid[data-grid-scroll-left="true"] > .eo-grid-scroll-edges::before,
.eo-grid[data-grid-scroll-right="true"] > .eo-grid-scroll-edges::after { opacity: 1; }
/* These catalogue hints only describe horizontal scrolling; dynamic controls
   replace them. Other hints explain row actions and remain visible. */
.catalog-scroll-hint:has(+ .eo-grid-scroll-enhanced) { display: none; }