/* =========================================================================
 * grid.css — dense ERP tables (DataGrid and static erp-table).
 * ========================================================================= */
.erp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.3px; background: var(--surface); color: var(--text); }
.erp-table th {
  background: linear-gradient(#f4f6f8, var(--surface-3)); color: var(--text-2); font-weight: 600; font-size: 11.6px; text-align: start; padding: 4px 7px; height: 27px;
  border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; user-select: none;
}
.erp-table td { padding: 3px 7px; height: 26px; border-bottom: 1px solid var(--line-soft); border-inline-end: 1px solid #eef1f4; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.erp-table tbody tr:hover td { background: var(--row-hover); }
.erp-table th.text-end, .erp-table td.text-end { text-align: end !important; }
.erp-table .neg { color: var(--bad); }
.erp-table.mini { font-size: 11.5px; }
.erp-table.mini th { height: 22px; padding: 2px 6px; font-size: 11px; }
.erp-table.mini td { height: 21px; padding: 1px 6px; }
.erp-table tr.rowlink { cursor: pointer; }
.doc-link { font-weight: 600; }
.row-muted td { color: var(--text-3) !important; }
.row-muted .doc-link { color: var(--text-3); }

/* ------------------------------------------------ DataGrid */
.dg { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.dg-fill { flex: 1 1 auto; height: 100%; }
.dg-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.dg-search { position: relative; flex: 0 1 280px; min-width: 160px; }
.dg-search .bi { position: absolute; inset-inline-start: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 12px; }
.dg-search input { padding-inline-start: 26px; }
.dg-bar-spacer { flex: 1; }
.dg-group-sel { width: auto; max-width: 230px; }
.dg-cols-btn { height: 26px; padding: 0 8px; }
.dg-cols-menu { max-height: 360px; overflow: auto; }
.dg-col-item { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.dg-count { font-size: var(--fs-sm); color: var(--text-2); padding-inline: 4px; white-space: nowrap; }
.dg-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; position: relative; outline: none; }
.dg-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-200); }
.dg-table { table-layout: fixed; }
.dg-table thead th { position: sticky; top: 0; z-index: 2; }
.dg-table th.sortable { cursor: pointer; }
.dg-table th.sortable:hover { background: #e3e9f0; color: var(--text); }
.dg-table th .th-label { display: inline-block; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dg-table th .sort-ic { font-size: 10px; margin-inline-start: 3px; color: var(--primary); vertical-align: middle; }
.dg-table th.sorted-asc .sort-ic::before { content: "\f235"; }
.dg-table th.sorted-desc .sort-ic::before { content: "\f229"; }
.dg-table th.sortable:not(.sorted-asc):not(.sorted-desc):hover .sort-ic::before { content: "\f283"; opacity: .45; }
.dg-table th.sorted-asc, .dg-table th.sorted-desc { color: var(--primary-700); background: #e4ecf6; }
.dg-resizer { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 3; }
.dg-resizer:hover { background: var(--primary-200); }
.dg-table th { position: sticky; }
.dg-table .dg-chk { width: 30px; text-align: center; padding: 0; }
.dg-table .dg-chk .form-check-input { margin: 0; vertical-align: middle; }
.dg-table tbody tr.dg-row { cursor: default; }
.dg-table tbody tr.selected td { background: var(--row-sel); }
.dg-table tbody tr.active-row td { background: var(--row-active) !important; }
.dg-table tbody tr.active-row td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .dg-table tbody tr.active-row td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
.dg-empty td { text-align: center; color: var(--text-3); padding: 28px !important; height: auto; background: var(--surface) !important; }
.dg-group td { background: #e7ecf2 !important; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--text); }
.dg-group td .bi { font-size: 10px; color: var(--primary); transition: transform .12s; display: inline-block; }
.dg-group.collapsed td .bi { transform: rotate(-90deg); }
[dir="rtl"] .dg-group.collapsed td .bi { transform: rotate(90deg); }
.dg-gcount { color: var(--text-3); font-size: var(--fs-xs); }
.dg-subtotal td { background: #f4f7fb !important; font-weight: 600; font-size: 11.8px; border-bottom: 1px solid var(--line); }
.dg-table tfoot td, .dg-total td { position: sticky; bottom: 0; background: #e9eef4 !important; font-weight: 700; border-top: 1px solid var(--line-strong); z-index: 1; }
.dg-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); flex-wrap: wrap; }
.pg-info { color: var(--text-2); }
.pg-sel { color: var(--primary-700); font-weight: 600; }
.pg-nav { display: flex; align-items: center; gap: 2px; }
.pg-size { width: 68px; margin-inline-end: 6px; }
.pg-btn { width: 26px; height: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; color: var(--primary); display: grid; place-items: center; padding: 0; }
.pg-btn:hover:not(:disabled) { background: var(--primary-50); }
.pg-btn:disabled { opacity: .4; }
.pg-of { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.pg-input { width: 40px; height: 24px !important; min-height: 24px; text-align: center; padding: 0 2px !important; }
.is-loading .dg-scroll { opacity: .45; }