/* =============================================================================
   Native HTML data grids: horizontal scroll lives on the grid host.
   Long cell/header text wraps; Actions and compact controls stay nowrap.
   Loads last so page/panel overflow-x:clip cannot hide the Actions column.
   Form tables (.os-desktop-form-table / .aps-site-table) are out of scope.
   ============================================================================= */

:root {
  --os-table-col-min-width: 5.5rem;
  --os-table-col-max-width: 16rem;
  --os-table-actions-min-width: 6rem;
}

@media (max-width: 991.98px) {
  :root {
    --os-table-col-max-width: 12rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --os-table-col-max-width: 10rem;
  }
}

html main .os-erp-page,
html main .os-erp-page-shell,
html main .os-erp-panel:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table),
html main .os-erp-card:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table),
html main .prs-content-panel:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html main .os-erp-page.os-erp-page-shell,
html main .os-erp-panel:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table),
html main .os-erp-card:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table),
html main .prs-content-panel:has(.os-erp-data-table-host, .os-native-table-scroll, table.os-erp-data-table) {
  overflow-x: hidden !important;
}

html main .os-erp-data-table-host,
html main .os-native-table-scroll,
html main .os-page-table-view:not(.os-grid-container),
html main .table-responsive:not(:has(.dx-datagrid)):not(:has(.os-dx-grid)):not(:has(.os-desktop-form-table)):not(:has(.aps-site-table)) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html main .os-erp-data-table-host table.table:not(.os-desktop-form-table):not(.aps-site-table),
html main .os-native-table-scroll table.table:not(.os-desktop-form-table):not(.aps-site-table),
html main .os-page-table-view table.table:not(.os-desktop-form-table):not(.aps-site-table),
html main .table-responsive:not(:has(.dx-datagrid)):not(:has(.os-dx-grid)):not(:has(.os-desktop-form-table)) table.table:not(.os-desktop-form-table):not(.aps-site-table),
html main table.os-erp-data-table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

html main .os-erp-data-table-host table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr,
html main .os-native-table-scroll table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr,
html main .os-page-table-view table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr,
html main .table-responsive:not(:has(.dx-datagrid)):not(:has(.os-dx-grid)) table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr,
html main table.os-erp-data-table > :not(caption) > tr {
  height: auto !important;
}

html main .os-erp-data-table-host table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *:not(.os-row-actions-col):not(.os-row-actions-cell):not([colspan]),
html main .os-native-table-scroll table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *:not(.os-row-actions-col):not(.os-row-actions-cell):not([colspan]),
html main .os-page-table-view table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *:not(.os-row-actions-col):not(.os-row-actions-cell):not([colspan]),
html main .table-responsive:not(:has(.dx-datagrid)):not(:has(.os-dx-grid)) table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *:not(.os-row-actions-col):not(.os-row-actions-cell):not([colspan]),
html main table.os-erp-data-table > :not(caption) > tr > *:not(.os-row-actions-col):not(.os-row-actions-cell):not([colspan]) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  height: auto !important;
  max-height: none !important;
  min-width: var(--os-table-col-min-width) !important;
  max-width: var(--os-table-col-max-width) !important;
  overflow: visible !important;
  vertical-align: middle;
}

html main .os-erp-data-table-host table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *[colspan],
html main .os-native-table-scroll table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *[colspan],
html main .os-page-table-view table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *[colspan],
html main .table-responsive:not(:has(.dx-datagrid)):not(:has(.os-dx-grid)) table.table:not(.os-desktop-form-table):not(.aps-site-table) > :not(caption) > tr > *[colspan],
html main table.os-erp-data-table > :not(caption) > tr > *[colspan] {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

html main table.os-erp-data-table thead th .os-th-chrome,
html main table.os-erp-data-table thead th .os-th-chrome__sort,
html main table.os-erp-data-table thead th .os-th-chrome__title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  height: auto;
  min-width: 0;
}

html main table.os-erp-data-table thead th .os-th-chrome,
html main table.os-erp-data-table thead th .os-th-chrome__sort {
  align-items: flex-start;
}

html main table.os-erp-data-table .os-row-actions,
html main table.os-erp-data-table .os-row-action,
html main table.os-erp-data-table td .btn,
html main table.os-erp-data-table th .btn,
html main table.os-erp-data-table .form-check,
html main table.os-erp-data-table .form-select,
html main table.os-erp-data-table .form-control:not(textarea),
html main table.os-erp-data-table input:not([type="hidden"]),
html main table.os-erp-data-table select,
html main table.os-erp-data-table thead th .os-th-chrome__funnel,
html main table.os-erp-data-table thead th .os-th-chrome__arrow {
  white-space: nowrap !important;
}

html main th.os-row-actions-col,
html main td.os-row-actions-cell,
html main table.os-erp-data-table > thead > tr > th.os-row-actions-col,
html main table.os-erp-data-table > tbody > tr > td.os-row-actions-cell {
  position: sticky !important;
  left: 0 !important;
  right: auto !important;
  width: var(--os-table-actions-min-width) !important;
  min-width: var(--os-table-actions-min-width) !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  visibility: visible !important;
  text-align: start !important;
}

html main thead th.os-row-actions-col {
  top: 0;
  z-index: 6 !important;
  background: var(--os-table-header-bg, var(--os-color-grid-header, #e8f0eb)) !important;
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.18);
}

html main thead th.os-row-actions-col .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
}

html main tbody td.os-row-actions-cell {
  z-index: 5 !important;
  background: var(--os-table-body-bg, var(--os-color-grid-body, #fff)) !important;
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
}

html table.table-striped > tbody > tr:nth-of-type(odd) > td.os-row-actions-cell {
  background: var(--os-table-stripe-bg, var(--os-color-grid-alt-row, #f8fafc)) !important;
}

html table.table-hover > tbody > tr:hover > td.os-row-actions-cell,
html table.table > tbody > tr.os-row-selected > td.os-row-actions-cell {
  background: var(--os-table-hover-bg, var(--os-color-grid-hover, #eef6f1)) !important;
}

html[dir="rtl"] main thead th.os-row-actions-col,
html[dir="rtl"] main tbody td.os-row-actions-cell {
  left: 0 !important;
  right: auto !important;
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.16);
}