/**
 * Shared ERP OLEN data-table skin.
 *
 * Keep the selectors limited to operational lists. A number of legacy
 * `responsive-table` and `tabla_simple` elements are used for document and
 * form layout, so styling every HTML table here would break those screens.
 */

:root {
  --olen-table-bg: #fff;
  --olen-table-header-bg: #f4f6f8;
  --olen-table-header-color: #637381;
  --olen-table-text: #212b36;
  --olen-table-divider: rgba(145, 158, 171, 0.2);
  --olen-table-hover: #f9fafb;
}

body table.table,
body table.dataTable,
body table.ag-table,
body table.portfolio-template-table,
body table.role-table,
body table#organization_list_dashboard {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--olen-table-bg);
  color: var(--olen-table-text);
  font-family: var(--erp-font-family), sans-serif;
  font-size: 14px;
}

body table.table > thead > tr > th,
body table.dataTable > thead > tr > th,
body table.ag-table > thead > tr > th,
body table.portfolio-template-table > thead > tr > th,
body table.role-table > thead > tr > th,
body table#organization_list_dashboard > thead > tr > th {
  border: 0 !important;
  background-color: var(--olen-table-header-bg) !important;
  color: var(--olen-table-header-color) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 24px !important;
  text-align: left;
  text-transform: none !important;
  vertical-align: middle;
}

body table.table > tbody > tr,
body table.dataTable > tbody > tr,
body table.ag-table > tbody > tr,
body table.portfolio-template-table > tbody > tr,
body table.role-table > tbody > tr,
body table#organization_list_dashboard > tbody > tr {
  border: 0;
  border-bottom: 1px dashed var(--olen-table-divider) !important;
  background: var(--olen-table-bg) !important;
  transition: background-color 0.15s ease;
}

body table.table > tbody > tr:last-child,
body table.dataTable > tbody > tr:last-child,
body table.ag-table > tbody > tr:last-child,
body table.portfolio-template-table > tbody > tr:last-child,
body table.role-table > tbody > tr:last-child,
body table#organization_list_dashboard > tbody > tr:last-child {
  border-bottom: 0 !important;
}

body table.table > tbody > tr > td,
body table.dataTable > tbody > tr > td,
body table.ag-table > tbody > tr > td,
body table.portfolio-template-table > tbody > tr > td,
body table.role-table > tbody > tr > td,
body table#organization_list_dashboard > tbody > tr > td {
  border: 0 !important;
  background: transparent !important;
  color: var(--olen-table-text) !important;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 22px;
  vertical-align: middle !important;
}

body table.table > tbody > tr:hover,
body table.dataTable > tbody > tr:hover,
body table.ag-table > tbody > tr:hover,
body table.portfolio-template-table > tbody > tr:hover,
body table.role-table > tbody > tr:hover,
body table#organization_list_dashboard > tbody > tr:hover {
  background: var(--olen-table-hover) !important;
}

/* DataTables duplicates the header when horizontal scrolling is enabled. */
body .dataTables_scrollHead table.dataTable > thead > tr > th,
body .dataTables_scrollHead table.dataTable > thead > tr > td {
  border: 0 !important;
  background-color: var(--olen-table-header-bg) !important;
  color: var(--olen-table-header-color) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  vertical-align: middle !important;
}

/* With scrollX, DataTables keeps a second header inside the scroll body only
 * to calculate column widths. It must stay fully collapsed; the shared table
 * rules above must never turn this sizing row into visible vertical space. */
body .dataTables_wrapper .dataTables_scrollBody table.dataTable > thead > tr {
  height: 0 !important;
}

body .dataTables_wrapper .dataTables_scrollBody table.dataTable > thead > tr > th,
body .dataTables_wrapper .dataTables_scrollBody table.dataTable > thead > tr > td {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  line-height: 0 !important;
}

body .dataTables_wrapper .dataTables_scrollBody table.dataTable > thead .dataTables_sizing {
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Invoice visible header: the legacy global rule gives th a 56px content
 * height and Finance adds vertical padding, resulting in an oversized header.
 * Use border-box and keep the intended 56px as the final rendered height. */
body #finance .dataTables_scrollHead table.dataTable > thead > tr {
  height: 56px !important;
}

body #finance .dataTables_scrollHead table.dataTable > thead > tr > th,
body #finance .dataTables_scrollHead table.dataTable > thead > tr > td {
  box-sizing: border-box !important;
  height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep invoice column labels such as "Created by" and "Last modified" on
 * one line. The document column can yield the space those labels require. */
body #finance #finance_list > thead > tr > th,
body #finance .dataTables_scrollHead table.dataTable > thead > tr > th {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* Shared pagination footer used by the ERP DataTables configuration. */
body .dataTables_wrapper > .table-footer,
body .table-footer,
body .portfolio-template-pagination {
  border-top: 1px dashed var(--olen-table-divider);
  background: var(--olen-table-bg);
  color: var(--olen-table-text);
  font-family: var(--erp-font-family), sans-serif;
  font-size: 14px;
}

body .dataTables_wrapper > .table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body .table-footer .dataTables_info {
  margin-right: auto;
  padding: 0;
  color: var(--olen-table-header-color);
}

body .table-footer .rows-per-page,
body .table-footer .rows-per-page .dataTables_length label,
body .table-footer .pagination-controls {
  display: flex;
  align-items: center;
}

body .table-footer .rows-per-page,
body .table-footer .rows-per-page .dataTables_length label {
  gap: 12px;
}

body .table-footer .pagination-controls button,
body .portfolio-template-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body .table-footer .pagination-controls button:disabled,
body .portfolio-template-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* One overflow affordance across all ERP list tables. The visible control is
 * deliberately just the three dots; the 36px hit area remains accessible. */
body .olen-table-overflow {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--olen-table-header-color);
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body .olen-table-overflow > img,
body .olen-table-overflow > svg {
  display: block;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

body .olen-table-overflow:hover,
body .olen-table-overflow:focus-visible,
body .olen-table-overflow[aria-expanded="true"] {
  background: var(--olen-table-header-bg);
  color: var(--olen-table-text);
  outline: none;
}

/* Finance rendered a labelled, bordered action button that made Invoice look
 * different and widened its final column. Use the same compact overflow
 * action as the other ERP list tables. */
body #finance #finance_list > thead > tr > th:last-child,
body #finance .dataTables_scrollHead table > thead > tr > th:last-child,
body #finance #finance_list > tbody > tr > td:last-child {
  width: 56px !important;
  min-width: 56px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center !important;
}

body #finance #finance_list .finance-actions-btn {
  display: inline-flex;
}

body #finance #finance_list .finance-actions-btn > span {
  display: none;
}

body #finance #finance_list .finance-actions-btn > svg {
  width: 36px;
  height: 36px;
}

body #finance #finance_list .finance-actions-btn:hover,
body #finance #finance_list .finance-actions-btn:focus-visible {
  background: var(--olen-table-header-bg);
  outline: none;
}