.erp-list-page { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--erp-space-5); min-width: 0; }
.erp-list-page__filters { display: flex; flex-wrap: wrap; gap: var(--erp-space-3); }
.erp-list-page__content { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: var(--erp-space-4); }
.erp-list-page__content > .erp-data-grid { min-height: 0; flex: 1; }
.erp-page-card { position: relative; min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; color: var(--erp-text-primary); background: var(--erp-grid-background); border: 1px solid var(--erp-border-glass); border-radius: var(--erp-radius-panel); box-shadow: var(--erp-shadow-md); overflow: clip; }
.erp-page-card__header { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--erp-space-3); padding: var(--erp-space-4) var(--erp-space-5); border-bottom: 1px solid var(--erp-grid-cell-border); background: var(--erp-glass-toolbar); }
.erp-page-card__body { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--erp-space-4); overflow: auto; background: var(--erp-grid-background); }
.erp-data-grid { position: relative; min-width: 0; min-height: 320px; display: flex; flex-direction: column; color: var(--erp-text-primary); background: var(--erp-grid-background); border: 1px solid var(--erp-border-glass); border-radius: var(--erp-radius-panel); box-shadow: var(--erp-shadow-md); overflow: clip; }
.erp-grid-header, .erp-grid-footer { position: relative; flex: 0 0 auto; }
.erp-grid-header { z-index: calc(var(--erp-grid-sticky-z) + 2); overflow: visible; }
.erp-grid-footer { z-index: 2; }
.erp-grid-body { position: relative; min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--erp-grid-background); }
.erp-grid-body > .erp-alert { flex: 0 0 auto; margin: var(--erp-space-4); }
.erp-grid-toolbar { --erp-grid-toolbar-control-size: 34px; display: flex; align-items: center; gap: var(--erp-space-3); padding: var(--erp-space-4) var(--erp-space-5); border-bottom: 1px solid var(--erp-grid-cell-border); background: var(--erp-glass-toolbar); }
.erp-grid-toolbar__heading { margin-inline-start: auto; min-width: 130px; }.erp-grid-toolbar__heading h2 { margin: 0; font: var(--erp-font-card-title); }.erp-grid-toolbar__heading p { margin: 2px 0 0; color: var(--erp-text-secondary); font: var(--erp-font-caption); }
.erp-grid-toolbar .erp-search-box { width: 260px; max-width: 100%; flex: 0 1 260px; }.erp-grid-toolbar .erp-search-box .erp-input-shell { height: var(--erp-grid-toolbar-control-size); min-height: var(--erp-grid-toolbar-control-size); border-radius: var(--erp-radius-sm); }.erp-grid-toolbar .erp-search-box .erp-input-shell:focus-within { border-color: var(--erp-border-strong); box-shadow: none; }.erp-grid-toolbar .erp-search-box .erp-input-shell input:focus, .erp-grid-toolbar .erp-search-box .erp-input-shell input:focus-visible { outline: none; box-shadow: none; }.erp-grid-toolbar .erp-search-box .erp-input-shell input::placeholder { direction: rtl; text-align: right; }.erp-grid-toolbar .erp-search-box .erp-input-shell > span:first-child { height: 100%; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }.erp-grid-toolbar .erp-search-box .erp-input-shell > span:first-child .erp-icon { display: block; }.erp-grid-toolbar .erp-search-box .erp-input-shell > button { width: 18px; min-width: 18px; height: 18px; min-height: 0; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.erp-grid-toolbar .erp-search-box .erp-input-shell > button:hover, .erp-grid-toolbar .erp-search-box .erp-input-shell > button:focus, .erp-grid-toolbar .erp-search-box .erp-input-shell > button:focus-visible { border: 0; background: transparent; box-shadow: none; outline: none; }
.erp-grid-toolbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--erp-space-3); }
.erp-grid-toolbar button, .erp-grid-toolbar select, .erp-grid-pagination button, .erp-grid-pagination select, .erp-grid-column-manager button { min-height: 32px; border: 1px solid var(--erp-border-default); border-radius: var(--erp-radius-sm); background: var(--erp-surface-primary); color: var(--erp-text-primary); cursor: pointer; }
.erp-grid-toolbar button { padding-inline: var(--erp-space-4); }.erp-grid-toolbar button:disabled, .erp-grid-pagination button:disabled { opacity: .55; cursor: not-allowed; }
.erp-grid-action { position: relative; width: var(--erp-grid-toolbar-control-size); min-width: var(--erp-grid-toolbar-control-size); height: var(--erp-grid-toolbar-control-size); min-height: var(--erp-grid-toolbar-control-size); display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border: 1px solid var(--erp-border-default); border-radius: var(--erp-radius-sm); background: var(--erp-surface-elevated); color: var(--erp-text-secondary); font: var(--erp-font-body-sm); cursor: pointer; white-space: nowrap; transition: border-color var(--erp-motion-fast), background var(--erp-motion-fast), color var(--erp-motion-fast); }
.erp-grid-action:hover:not(:disabled):not(.is-disabled) { border-color: var(--erp-color-primary); background: var(--erp-color-primary); color: var(--erp-text-inverse); }
.erp-grid-action--primary { color: var(--erp-text-inverse); border-color: var(--erp-color-primary); background: var(--erp-color-primary); }
.erp-grid-action--danger { color: var(--erp-color-danger); }
.erp-grid-action--excel { color: var(--erp-color-success); }
.erp-grid-action.is-disabled { opacity: .5; cursor: not-allowed; }
.erp-grid-action .erp-icon { width: 17px; height: 17px; }
.erp-grid-action::after { content: attr(data-tooltip); position: absolute; z-index: calc(var(--erp-z-dropdown) + 1); inset-block-start: 50%; inset-inline-start: calc(100% + 7px); translate: 0 -50%; padding: 4px 8px; border: 1px solid var(--erp-border-glass); border-radius: var(--erp-radius-control-small); background: var(--erp-glass-popover); color: var(--erp-text-primary); box-shadow: var(--erp-shadow-sm); font: var(--erp-font-caption); line-height: 1.4; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--erp-motion-fast) var(--erp-ease-standard), visibility var(--erp-motion-fast) var(--erp-ease-standard); }
.erp-grid-action:hover::after, .erp-grid-action:focus-visible::after, .erp-grid-action:focus-within::after { opacity: 1; visibility: visible; }
.erp-grid-action:disabled::after, .erp-grid-action.is-disabled::after { display: none; }
.erp-grid-file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.erp-grid-column-manager { position: relative; }.erp-grid-column-manager summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--erp-border-default); border-radius: var(--erp-radius-sm); cursor: pointer; }
.erp-grid-column-manager__panel { position: absolute; z-index: var(--erp-z-dropdown); inset-block-start: calc(100% + 6px); inset-inline-end: 0; width: min(440px, calc(100vw - 32px)); max-height: 430px; overflow: auto; padding: var(--erp-space-5); border: 1px solid var(--erp-border-default); border-radius: var(--erp-radius-md); background: var(--erp-surface-elevated); box-shadow: var(--erp-shadow-overlay); }
.erp-grid-column-manager__item { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-4); padding-block: var(--erp-space-3); border-bottom: 1px solid var(--erp-border-subtle); }
.erp-grid-column-manager__item label { display: flex; align-items: center; gap: var(--erp-space-3); }.erp-grid-column-manager__buttons { display: flex; gap: 2px; }.erp-grid-column-manager__buttons button { min-width: 28px; padding: 0; }
.erp-grid-scroll { position: relative; min-width: 0; min-height: 0; max-width: 100%; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.erp-grid-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--erp-grid-background); }
.erp-grid-table th, .erp-grid-table td { position: relative; padding: var(--erp-grid-cell-padding-default); border-block-end: 1px solid var(--erp-grid-cell-border); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.erp-grid-table thead th { height: var(--erp-grid-header-height); color: var(--erp-grid-header-text); background: var(--erp-grid-header-background); font: var(--erp-font-table-header); text-align: center; }
.erp-grid-table.has-sticky-header thead { position: sticky; inset-block-start: 0; z-index: var(--erp-grid-sticky-z); }
.erp-grid-table tbody tr { height: var(--erp-grid-row-default); background: var(--erp-grid-row-background); }.erp-grid-table tbody tr.is-alternate { background: var(--erp-grid-row-alternate); }.erp-grid-table tbody tr:hover { background: var(--erp-grid-row-hover); }.erp-grid-table tbody tr.is-selected { background: var(--erp-grid-row-selected); }.erp-grid-table tbody tr.is-disabled { color: var(--erp-text-disabled); background: var(--erp-grid-row-disabled); }
.erp-grid-table tbody tr:focus-visible { outline: 2px solid var(--erp-grid-focus-ring); outline-offset: -2px; }
.erp-grid-table .is-pinned { z-index: 2; background: inherit; box-shadow: var(--erp-grid-pinned-shadow); }.erp-grid-table thead .is-pinned { z-index: calc(var(--erp-grid-sticky-z) + 1); background: var(--erp-grid-header-background); }
.erp-grid-table tfoot td { background: var(--erp-grid-footer-background); font-weight: 650; }
.erp-grid-sort { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: var(--erp-space-3); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.erp-grid-resize-handle { position: absolute; inset-block: 6px; inset-inline-end: -4px; width: 8px; padding: 0; border: 0; border-inline-start: 2px solid transparent; background: transparent; cursor: col-resize; }.erp-grid-resize-handle:hover, .erp-grid-resize-handle:focus-visible { border-color: var(--erp-grid-resize-handle); }
.erp-grid-selection-cell { width: 44px; min-width: 44px; max-width: 44px; text-align: center !important; }
.erp-grid-check { width: 19px; height: 19px; min-height: 19px !important; display: inline-grid; place-items: center; padding: 0 !important; border: 1px solid var(--erp-border-strong) !important; border-radius: var(--erp-radius-xs) !important; background: var(--erp-surface-primary) !important; color: var(--erp-text-inverse) !important; line-height: 1; }
.erp-grid-check[aria-checked="true"] { border-color: var(--erp-color-primary) !important; background: var(--erp-color-primary) !important; }.erp-grid-check:focus-visible { outline: 2px solid var(--erp-grid-focus-ring); outline-offset: 2px; }
.erp-grid-align--start, .erp-grid-align--center, .erp-grid-align--end { text-align: center !important; }
.erp-grid-refreshing { position: absolute; inset-block-start: 0; inset-inline: 0; padding: 3px var(--erp-space-5); color: var(--erp-color-primary); background: var(--erp-grid-loading-overlay); text-align: center; font: var(--erp-font-caption); }
.erp-grid-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--erp-space-5); padding: var(--erp-space-4) var(--erp-space-5); border-top: 1px solid var(--erp-grid-cell-border); background: var(--erp-grid-footer-background); text-align: center; font: var(--erp-font-body-sm); }
.erp-grid-pagination__summary, .erp-grid-pagination label, .erp-grid-pagination__buttons { display: flex; align-items: center; justify-content: center; gap: var(--erp-space-3); }.erp-grid-pagination button { min-width: 32px; padding: 0 var(--erp-space-3); }
@media (max-width: 900px) { .erp-grid-toolbar { flex-wrap: wrap; }.erp-grid-toolbar__heading { flex: 1 1 100%; }.erp-grid-toolbar .erp-search-box { max-width: 260px; }.erp-grid-pagination { flex-wrap: wrap; } }
@media (max-width: 600px) { .erp-grid-toolbar .erp-search-box { width: 100%; max-width: none; flex-basis: 100%; }.erp-grid-toolbar__actions span { display: none; }.erp-grid-pagination__summary { flex-basis: 100%; }.erp-grid-pagination { justify-content: center; }.erp-grid-column-manager__panel { position: fixed; inset: auto var(--erp-space-6) var(--erp-space-6); width: auto; } }
@media (prefers-reduced-motion: reduce) { .erp-data-grid * { scroll-behavior: auto !important; } }
.erp-grid-toolbar .erp-search-box .erp-input-shell:focus-within { border-color: var(--erp-border-focus); box-shadow: var(--erp-shadow-focus); }