/* erp-table.css split (2/6): responsive toolbar collapse, table scroll/stage,
 * header row and column-resize handle. */

@container erp-table (max-width: 900px) {
    .erp-table-toolbar {
        gap: 0.65rem;
    }

    .erp-table-toolbar-leading {
        min-width: 0;
        flex: 1 1 auto;
    }

    .erp-table-toolbar-actions {
        flex: 0 0 auto;
    }

    .erp-table-import-export,
    .erp-bulk-delete-trigger,
    .erp-table-create {
        box-sizing: border-box;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        flex: 0 0 38px;
        gap: 0;
        padding: 0;
    }

    .erp-table-action-label {
        display: none;
    }

}

.erp-table-settings-panel[data-ui-floating-mounted="true"] {
    position: fixed;
    top: 0;
    right: auto;
    left: 0;
}

.erp-table-settings-panel--export {
    width: min(420px, calc(100vw - 2rem));
}

.erp-table-settings-head--export {
    align-items: flex-start;
}

.erp-export-eyebrow {
    margin: 0 0 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.erp-table-settings-head--export h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.erp-export-body {
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem;
}

.erp-export-option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-export-option:hover,
.erp-export-option:focus-visible {
    border-color: var(--primary-100);
    background: var(--primary-50);
    outline: none;
}

.erp-export-option-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--primary);
}

.erp-export-option strong,
.erp-export-option small {
    display: block;
    min-width: 0;
}

.erp-export-option strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.erp-export-option small {
    margin-top: 0.18rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

.erp-export-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.erp-export-option.is-disabled:hover {
    border-color: transparent;
    background: transparent;
}

.erp-table-scroll {
    overflow: hidden;
    border-top: 1px solid var(--divider);
}

.erp-table-stage {
    --erp-selection-rail-width: 42px;
    --erp-actions-rail-width: 168px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-width: 0;
}

.erp-table-stage--with-selection {
    grid-template-columns: var(--erp-selection-rail-width) minmax(0, 1fr);
}

.erp-table-stage--with-actions {
    grid-template-columns: minmax(0, 1fr);
}

.erp-table-stage--with-selection.erp-table-stage--with-actions {
    grid-template-columns: var(--erp-selection-rail-width) minmax(0, 1fr);
}

.erp-table-main-scroll {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: opacity 120ms ease;
}

.erp-table-card.is-erp-processing .erp-table-main-scroll,
.erp-table-card.is-erp-processing .erp-table-selection-rail-body,
.erp-table-card.is-erp-processing .erp-table-actions-rail-body {
    opacity: 0.72;
}

.erp-table-scroll.is-horizontally-scrollable .erp-table-main-scroll {
    overflow-x: auto;
}

/* Vue keeps one native horizontal control inside the table shell, at the
 * lowest visible table edge and immediately above the footer when it enters
 * view. The data viewport still owns touch/trackpad scrolling; only its
 * duplicate native scrollbar is visually suppressed on hover-capable devices. */
.erp-table-card--vue .erp-table-scroll.is-horizontally-scrollable .erp-table-main-scroll {
    scrollbar-width: none;
}

.erp-table-card--vue .erp-table-scroll.is-horizontally-scrollable .erp-table-main-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.erp-table-persistent-horizontal-scroll {
    position: sticky;
    z-index: 7;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    height: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--divider);
    background: var(--surface);
    box-shadow: 0 -4px 12px -12px color-mix(in srgb, var(--color-ink) 35%, transparent);
    overscroll-behavior-x: contain;
}

.erp-table-persistent-horizontal-scroll:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.erp-table-persistent-horizontal-scroll__track {
    height: 1px;
}

.erp-table {
    width: 100%;
    min-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.84rem;
}

.erp-table th,
.erp-table td {
    border-bottom: 1px solid var(--divider);
    color: var(--color-ink);
    text-align: left;
    vertical-align: middle;
}

.erp-table th {
    position: relative;
    height: calc(var(--d-row-h) - 2px);
    padding: 0 var(--d-pad-x);
    background: var(--surface-sunken);
    color: var(--color-kview);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.erp-table td {
    height: var(--d-row-h);
    padding: var(--d-pad-y) var(--d-pad-x);
    background: var(--surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-table tbody tr:hover td,
.erp-table tbody tr.is-actions-open td {
    background: var(--surface-alt);
}

.erp-table tbody tr:focus-within td {
    background: var(--surface-alt);
}

.erp-table tbody tr[data-erp-href]:not([data-erp-href=""]) {
    cursor: pointer;
}

.erp-table-empty-state {
    position: sticky;
    left: 0;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid var(--divider);
    background: var(--surface);
}

.erp-table-empty-state .ui-empty-state {
    min-width: 0;
}

.erp-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

.erp-table-heading-main {
    min-width: 0;
    flex: 1 1 auto;
}

.erp-table-heading-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    flex: 0 0 auto;
}

.erp-table-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.erp-table-sort > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--text-muted);
    opacity: 0.55;
    transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.erp-sort-icon[data-sort-direction="asc"],
.erp-sort-icon[data-sort-direction="desc"] {
    color: var(--primary);
    opacity: 1;
}

.erp-column-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.erp-table th:hover .erp-column-filter-trigger {
    opacity: 0.45;
}

.erp-column-filter-trigger:focus-visible,
.erp-column-filter-trigger[aria-expanded="true"],
.erp-column-filter-trigger.is-active {
    opacity: 1;
}

.erp-column-filter-trigger:hover,
.erp-column-filter-trigger:focus-visible,
.erp-column-filter-trigger[aria-expanded="true"] {
    border-color: var(--primary-100);
    background: var(--primary-50);
    color: var(--primary);
    outline: none;
}

.erp-column-filter-trigger.is-active {
    color: var(--primary);
}

.erp-column-resize {
    position: absolute;
    top: 0;
    right: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

/* The trailing edge of the last resizable column has no neighbor to widen
 * its hit target into, so the -3px offset above only pushes it 3px past the
 * table's own right edge. That sliver is invisible (clipped by the scroll
 * container's overflow), but scrollWidth still counts it, which wrongly
 * flags the table as horizontally scrollable even when every column fits.
 * Flush this one handle to the edge instead of letting it overhang. */
.erp-table th:last-of-type .erp-column-resize,
.erp-table th:has(+ .erp-table-actions-head) .erp-column-resize {
    right: 0;
}

.erp-column-resize:hover::after,
.is-resizing-erp-column .erp-column-resize::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 3px;
    width: 2px;
    border-radius: var(--radius-pill);
    background: var(--primary);
}

.erp-column-filter-popover {
    position: fixed;
    z-index: var(--z-modal);
    top: 0;
    left: 0;
    width: min(300px, calc(100vw - 2rem));
    max-height: calc(100vh - 1rem);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-popover);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-ink);
    text-transform: none;
}