/* B2CDataTable – loaded from assets with other app styles */
.b2c-datatable .p-datatable-header {
  border: none;
}

/*
 * Let the table grow with explicit column widths (persisted resize) instead of
 * shrinking columns to fit a 100%-wide table — otherwise saved `width` on th/td
 * looks “lost” after refresh. Wrapper scrolls horizontally (e.g. infinite-scroll).
 */
.b2c-datatable .b2c-datatable-body table.p-datatable-table {
  width: max-content;
  min-width: 100%;
}

.b2c-datatable .b2c-datatable-body .p-datatable-tbody > tr > td {
  height: 3rem;
  min-height: 3rem;
  max-height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

/*
 * Default column min width when the user has not saved a width (class from B2CDataTable).
 * Kept on a class (not inline) so PrimeVue resize can apply width/max-width with !important.
 * Shrinking below ~8rem only applies after a saved width exists (inline min/max match px).
 */
.b2c-datatable
  .b2c-datatable-body
  .p-datatable-thead
  > tr
  > th.b2c-datatable-col-default,
.b2c-datatable
  .b2c-datatable-body
  .p-datatable-tbody
  > tr
  > td.b2c-datatable-col-default {
  min-width: 8rem;
}

/* Companies index: hoofdbedrijf “Naam” cell — background on <td> so it fills full row height */
.b2c-datatable
  .b2c-datatable-body
  .p-datatable-tbody
  > tr.b2c-company-group-primary
  > td[data-b2c-col-key="name"] {
  background-color: var(--p-surface-100);
  border-inline-end: 1px solid var(--p-surface-300);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle;
}

.app-dark
  .b2c-datatable
  .b2c-datatable-body
  .p-datatable-tbody
  > tr.b2c-company-group-primary
  > td[data-b2c-col-key="name"] {
  background-color: var(--p-surface-800);
  border-inline-end: 1px solid var(--p-surface-600);
}

.b2c-datatable
  .b2c-datatable-body
  .p-datatable-tbody
  > tr.b2c-company-group-primary:hover
  > td[data-b2c-col-key="name"] {
  background-color: var(--p-surface-200);
}

.app-dark
  .b2c-datatable
  .b2c-datatable-body
  .p-datatable-tbody
  > tr.b2c-company-group-primary:hover
  > td[data-b2c-col-key="name"] {
  background-color: var(--p-surface-700);
}

/* ColumnPicker drag handle cursor */
.column-picker-drag-handle:active {
  cursor: grabbing;
}

/* Filters drawer: full-height flex layout so footer stays at bottom */
.b2c-filter-drawer .p-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b2c-filter-drawer-inner {
  min-height: 0;
}

.b2c-infinite-scroll-wrapper {
  contain: layout;
}

/* Sort icon behavior: hidden by default, visible on hover, always visible on active sorted column */
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column
  .p-datatable-sort-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column
  .p-datatable-sort-icon {
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column:hover
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column:hover
  .p-datatable-sort-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column:hover
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column:hover
  .p-datatable-sort-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column.p-datatable-column-sorted
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-sortable-column.p-datatable-column-sorted
  .p-datatable-sort-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column.p-datatable-column-sorted
  .p-sortable-column-icon,
.b2c-datatable
  .p-datatable-thead
  > tr
  > th.p-datatable-sortable-column.p-datatable-column-sorted
  .p-datatable-sort-icon {
  opacity: 1 !important;
}
.b2c-datatable-infinite .p-datatable-thead > tr > th {
  position: sticky !important;
  top: 0;
  z-index: 2;
  background: var(--p-content-background);
  box-shadow: 0 1px 0 0 var(--p-content-border-color);
}
.app-dark .b2c-datatable-infinite .p-datatable-thead > tr > th {
  background: var(--p-surface-800);
  box-shadow: 0 1px 0 0 var(--p-surface-600);
}
