/**
 * DataTables admin theme overrides — load after datatables.min.css.
 * Redefines vendor :root tokens and hardcoded rules with admin theme variables.
 */
:root {
  /* Local aliases → admin theme tokens */
  --dt-button-fill: var(--icon-color, var(--panel-text-muted));
  --dt-border-color: var(--input-border-color);
  --dt-border-muted: var(--panel-border-color);
  --dt-surface: var(--main-backcolor);
  --dt-surface-raised: var(--modal-backcolor);
  --dt-surface-hover: var(--table-hover-backcolor);
  --dt-surface-muted: var(--panel-head-backcolor);
  --dt-surface-button-hover: var(--inverted-button-hover-background-color);
  --dt-text: var(--panel-text);
  --dt-text-muted: var(--panel-text-muted);
  --dt-cell-font-size: var(--table-cell-font-size);
  --dt-chrome-font-size: var(--font-size-dense);
  --dt-text-on-accent: var(--primary-button-color);
  --dt-icon-add: var(--icon-color-success, var(--green-color));
  --dt-icon-edit: var(--icon-color-edit, var(--main-color));
  --dt-icon-danger: var(--icon-color-danger, var(--danger-color));
  --dt-icon-info: var(--icon-color-info, var(--panel-accent-light));
  --dt-icon-link: var(--icon-color-link, var(--links-color));
  --dt-icon-excel: var(--icon-color-success, var(--inverted-success-button-color));
  --dt-icon-pdf: var(--icon-color-pdf, var(--red-color));
  --dt-icon-success: var(--icon-color-success, var(--green-color));
  --dt-accent-soft: var(--panel-accent-soft);
  --dt-accent: var(--panel-accent);
  --dt-accent-border: var(--panel-accent-border);
  --dt-filter-button-default-bg: var(--inverted-danger-button-hover-background-color);
  --dt-filter-button-default-border: var(--inverted-danger-button-border-color);
  --dt-filter-button-default-icon: var(--inverted-danger-button-color);
  --dt-filter-button-default-hover-bg: var(--inverted-danger-button-background-color);
  --dt-filter-button-default-hover-border: var(--inverted-danger-button-hover-border-color);
  --dt-filter-button-default-hover-icon: var(--inverted-danger-button-hover-color);
  --dt-filter-button-active-bg: var(--danger-color);
  --dt-filter-button-active-border: var(--inverted-danger-button-hover-border-color);
  --dt-filter-button-active-icon: var(--primary-button-color);
  --dt-filter-button-active-hover-bg: var(--inverted-danger-button-color);
  --dt-filter-button-active-hover-border: var(--dt-filter-button-active-border);
  --dt-filter-button-active-hover-icon: var(--dt-filter-button-active-icon);
  --dt-danger-soft-bg: var(--dt-filter-button-default-bg);
  --dt-danger-soft-border: var(--dt-filter-button-default-border);
  --dt-danger-active-bg: var(--dt-filter-button-active-bg);
  --dt-danger-active-border: var(--dt-filter-button-active-border);
  --dt-paging-hover-bg: var(--table-hover-backcolor);
  --dt-paging-disabled-fill: var(--input-border-color);
  --dt-control-chevron: color-mix(in srgb, var(--panel-text) 50%, transparent);
  --dt-column-order-icon: var(--table-header-color, var(--panel-text-muted));
  --dt-column-order-icon-hover: var(--panel-text-muted, var(--panel-text));
  --dt-column-order-icon-active: var(--panel-accent, var(--main-color));
  --dt-column-order-icon-opacity: 0.45;
  --dt-column-order-icon-hover-opacity: 0.6;
  --dt-column-order-icon-active-opacity: 0.75;
  --dt-outline-hover: color-mix(in srgb, var(--panel-text) 8%, transparent);
  --dt-border-fade: color-mix(in srgb, var(--panel-text) 30%, transparent);
  --dt-border-fade-light: color-mix(in srgb, var(--panel-text) 15%, transparent);

  /* Vendor DataTables row-state fills (replace vendor rgba(--dt-row-*) channel tokens).
     Hover/stripe must stay translucent so per-cell backgrounds (status, totals, etc.)
     are darkened/lightened instead of replaced by an opaque fill. */
  --dt-html-background: var(--panel-head-backcolor);
  --dt-row-stripe-fill: color-mix(in srgb, var(--panel-accent) 4%, transparent);
  --dt-row-hover-fill: color-mix(in srgb, var(--panel-text) 10%, transparent);
  --dt-column-ordering-fill: color-mix(in srgb, var(--panel-accent) 3%, transparent);
  --dt-column-ordering-stripe-fill: color-mix(in srgb, var(--panel-accent) 6%, transparent);
  --dt-column-ordering-stripe-fill-2: color-mix(in srgb, var(--panel-accent) 5%, transparent);
  --dt-column-ordering-stripe-fill-3: color-mix(in srgb, var(--panel-accent) 4%, transparent);
  --dt-column-ordering-hover-fill: color-mix(in srgb, var(--panel-accent) 14%, transparent);
  --dt-column-ordering-hover-fill-2: color-mix(in srgb, var(--panel-accent) 12%, transparent);
  --dt-column-ordering-hover-fill-3: color-mix(in srgb, var(--panel-accent) 10%, transparent);

  /* FixedColumns */
  --dtfc_background: var(--panel-head-backcolor);
  --dtfc-thead-cell_background: var(--panel-head-backcolor);
  --dtfc-tbody-cell_background: var(--panel-head-backcolor);

  /* ColumnControl */
  --dtcc-button_hover-background: color-mix(in srgb, var(--panel-text) 10%, transparent);
  --dtcc-button-icon_color: var(--panel-text);
  --dtcc-dropdown_background: var(--modal-body-backcolor);
  --dtcc-dropdown_border: 1px solid var(--modal-border-color);
  --dtcc-dropdown_box-shadow: var(--panel-shadow);
  --dtcc-dropdown-button_color: var(--modal-text-color);
  --dtcc-dropdown-button_hover-background: var(--table-hover-backcolor);
  --dtcc-spacer_border: 1px solid var(--modal-border-color);
  --dtcc-title_background: var(--panel-accent-soft);
  --dtcc-search-icon_color: var(--panel-text-muted);
  --dtcc-search-icon_hover-background: var(--table-hover-backcolor);
  --dtcc-search-input_border: 1px solid var(--input-border-color);
  --dtcc-search-input_background-color: var(--panel-head-backcolor);
  --dtcc-search-input_background: var(--panel-head-backcolor);
  --dtcc-list-buttons_background: var(--table-hover-backcolor);

  /* DateTime picker */
  --dt-datetime_background: var(--modal-body-backcolor);
  --dt-datetime_border: 1px solid var(--modal-border-color);
  --dt-datetime_box-shadow: var(--panel-shadow);
  --dt-datetime-table-header_color: var(--panel-text-muted);
  --dt-datetime-table-body_color: var(--panel-text);
  --dt-datetime-table-selectable_background: var(--table-hover-backcolor);
  --dt-datetime-table-selectable_disabled-color: var(--panel-text-muted);
  --dt-datetime-table-selectable_disabled-background: var(--panel-head-backcolor);
  --dt-datetime-table-selectable_disabled-hover-color: var(--panel-text-muted);
  --dt-datetime-table-selectable_disabled-hover-background: var(--panel-head-backcolor);
  --dt-datetime-table_hover-background: var(--yellow-color);
  --dt-datetime-table_hover-color: var(--primary-button-color);
  --dt-datetime-table-now_background: var(--panel-accent-soft);
  --dt-datetime-table-selected_background: var(--panel-accent);
  --dt-datetime-table-selected_color: var(--primary-button-color);
  --dt-datetime-label_hover-border: 1px solid var(--input-border-color);
  --dt-datetime-label_hover-background: var(--table-hover-backcolor);
  --dt-datetime-icon_hover-border: 1px solid var(--input-border-color);
  --dt-datetime-icon_hover-background: var(--table-hover-backcolor);
  --dt-datetime-icon-triangle_border-color: var(--panel-text);
  --dt-datetime-error_color: var(--danger-color);
}

body.admin-theme-mode-dark {
  --dt-row-stripe-fill: color-mix(in srgb, var(--panel-accent) 8%, transparent);
  --dt-row-hover-fill: color-mix(in srgb, var(--panel-text) 14%, transparent);
  --dt-column-ordering-fill: color-mix(in srgb, var(--panel-accent) 5%, transparent);
  --dt-column-ordering-stripe-fill: color-mix(in srgb, var(--panel-accent) 10%, transparent);
  --dt-column-ordering-stripe-fill-2: color-mix(in srgb, var(--panel-accent) 8%, transparent);
  --dt-column-ordering-stripe-fill-3: color-mix(in srgb, var(--panel-accent) 6%, transparent);
  --dt-column-ordering-hover-fill: color-mix(in srgb, var(--panel-accent) 20%, transparent);
  --dt-column-ordering-hover-fill-2: color-mix(in srgb, var(--panel-accent) 16%, transparent);
  --dt-column-ordering-hover-fill-3: color-mix(in srgb, var(--panel-accent) 14%, transparent);
  /* Prefer accent-light: slate dark panel-accent is darker than header glyphs */
  --dt-column-order-icon-active: var(--panel-accent-light, var(--panel-accent));
  --dt-column-order-icon-opacity: 0.38;
  --dt-column-order-icon-hover-opacity: 0.55;
  --dt-column-order-icon-active-opacity: 1;
}

/* Processing spinner uses theme accent (vendor rgb(--dt-row-selected) channels removed) */
div.dt-processing > div:last-child > div {
  background: var(--panel-accent);
}

/* Vendor rules with hardcoded colors (admin uses body.admin-theme-mode-dark, not html.dark) */
table.dataTable tbody td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  border-left-color: var(--dt-control-chevron);
}
table.dataTable tbody tr.dt-hasChild td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
  border-top-color: var(--dt-control-chevron);
  border-left-color: transparent;
}

body.admin-theme-mode-dark table.dataTable tbody td.dt-control:before,
body.admin-theme-mode-dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
body.admin-theme-mode-dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  border-left-color: var(--dt-control-chevron);
}

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline-color: var(--dt-outline-hover);
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  border-color: var(--dt-border-fade);
}

div.dt-container.dt-empty-footer tbody > tr:last-child > *,
div.dt-container.dt-empty-footer .dt-scroll-body {
  border-bottom: 1px solid var(--dt-border-fade);
}

/* DT2 empty cell is .dt-empty; vendor collapsed rules only mention .dataTables_empty */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-empty,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
  cursor: default !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-empty:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
  display: none !important;
}

div.dt-container .dt-search input,
div.dataTables_wrapper .dataTables_filter input {
  border-color: var(--input-border-color);
  background-color: transparent;
  color: var(--input-text-color);
}

/* Page size / length selector — match admin form select tokens (not vendor transparent) */
div.dt-container select.dt-input,
div.dataTables_wrapper .dataTables_length select {
  border-color: var(--input-border-color);
  background-color: var(--panel-head-backcolor);
  background-image: none;
  color: var(--input-text-color);
}

div.dt-container select.dt-input option,
div.dataTables_wrapper .dataTables_length select option {
  background-color: var(--dropdown-menu-bg, var(--modal-body-backcolor));
  color: var(--dropdown-menu-text, var(--input-text-color));
}

body.admin-theme-mode-dark div.dt-container select.dt-input,
body.admin-theme-mode-dark div.dataTables_wrapper .dataTables_length select {
  color-scheme: dark;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: var(--dt-border-fade);
  background: none;
  background-color: var(--dt-paging-hover-bg);
  color: inherit !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--dt-paging-disabled-fill) !important;
}

div.dt-container .dt-paging .dt-paging-button:hover,
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: inherit !important;
  border-color: var(--dt-border-color);
  background: none;
  background-color: var(--dt-paging-hover-bg);
}

table.dataTable > tbody > tr > .selected {
  background-color: var(--panel-accent-soft) !important;
  color: var(--panel-text) !important;
}

table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
  outline-color: var(--panel-accent);
}
table.dataTable tbody tr.selected th.focus,
table.dataTable tbody tr.selected td.focus {
  outline-color: var(--panel-accent-light);
}

table.dataTable tr.dtrg-group th {
  background-color: var(--dt-accent-soft);
}
table.dataTable tr.dtrg-group.dtrg-level-1 th,
table.dataTable tr.dtrg-group.dtrg-level-2 th,
table.dataTable tr.dtrg-group.dtrg-level-3 th,
table.dataTable tr.dtrg-group.dtrg-level-4 th,
table.dataTable tr.dtrg-group.dtrg-level-5 th {
  background-color: color-mix(in srgb, var(--panel-text) 5%, transparent);
}

div.dt-button-info,
div.dt-autofill-list {
  background-color: var(--modal-body-backcolor);
  color: var(--modal-text-color);
  box-shadow: var(--panel-shadow);
}

div.dt-button-collection {
  background-color: var(--modal-body-backcolor);
  border-color: var(--modal-border-color);
  box-shadow: var(--panel-shadow);
}

.dtsb-greyscale {
  border-color: var(--input-border-color) !important;
}

div.dts div.dts_label {
  background: color-mix(in srgb, var(--panel-text) 80%, transparent);
  color: var(--primary-button-color);
}

div.dts div.dt-scroll-body table,
div.dts div.dataTables_scrollBody table {
  background-color: var(--panel-head-backcolor);
}

table.dtcr-cloned.dataTable {
  background-color: color-mix(in srgb, var(--panel-head-backcolor) 90%, transparent);
}

table.dataTable tbody tr td.dtcr-moving-first {
  border-left-color: var(--panel-accent);
}
table.dataTable tbody tr td.dtcr-moving-last {
  border-right-color: var(--panel-accent);
}

div.dt-rowReorder-float-parent {
  outline-color: var(--panel-accent);
}
div.dt-rowReorder-float-parent table.dt-rowReorder-float {
  background-color: var(--panel-head-backcolor);
}
tr.dt-rowReorder-moving {
  outline-color: var(--panel-text-muted);
}

div.dt-autofill-handle {
  background: var(--panel-accent);
}
div.dtk-focus-alt div.dt-autofill-handle {
  background: var(--yellow-color);
}
div.dt-autofill-select {
  background-color: color-mix(in srgb, var(--panel-accent) 65%, transparent);
}

/* Row selection: admin theme tokens (overrides vendor rgba(--dt-row-selected) fill) */
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--panel-accent-soft) !important;
  color: var(--panel-text) !important;
}
table.dataTable > tbody > tr.selected a {
  color: var(--links-color) !important;
}
table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
table.dataTable.display > tbody > tr.selected + tr.selected > td {
  border-top-color: var(--panel-accent-border) !important;
}
table.dataTable.stripe > tbody > tr.odd.selected > *,
table.dataTable.display > tbody > tr.odd.selected > *,
table.dataTable.stripe > tbody > tr.even.selected > *,
table.dataTable.display > tbody > tr.even.selected > * {
  box-shadow: inset 0 0 0 9999px var(--panel-accent-soft) !important;
}
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px var(--panel-accent-soft) !important;
}
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3,
table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px var(--panel-accent-soft) !important;
}

/* Stripe / hover / order-column: theme fills (override vendor rgba(--dt-row-*)) */
table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > * {
  box-shadow: inset 0 0 0 9999px var(--dt-row-stripe-fill);
}
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--dt-row-hover-fill);
}
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3,
table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-fill);
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-stripe-fill);
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_2,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_2 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-stripe-fill-2);
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_3,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_3 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-stripe-fill-3);
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-hover-fill);
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-hover-fill-2);
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  box-shadow: inset 0 0 0 9999px var(--dt-column-ordering-hover-fill-3);
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_1,
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_2,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_2,
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_3,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_3,
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px var(--panel-accent-soft) !important;
}

/* cell font size and padding */
table.dataTable>thead>tr>th, 
table.dataTable>thead>tr>td,
table.dataTable>tbody>tr>th, 
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>th, 
table.dataTable>tfoot>tr>td {
  font-size: var(--dt-cell-font-size);
}
table.dataTable>thead>tr>th, 
table.dataTable>thead>tr>td {
  padding: 10px 6px;
}
table.dataTable>tbody>tr>th, 
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>td {
  padding: 4px 6px;
}

table.dataTable>tbody>tr>td {
  color: var(--dt-text);
}

input.form-control-v2.dt-searchable-input {
  color: var(--input-text-color);
  /* Inherit thead title typography (same as span.dt-column-title) */
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  position: relative;
  z-index: 1;
  background-color: transparent;
}

table.dataTable>tbody>tr>th.dt-no-padding, 
table.dataTable>tbody>tr>td.dt-no-padding,
table.dataTable>tfoot>tr>td.dt-no-padding {
  padding: 0px 6px;
}

table.dataTable>thead>tr>th {
  vertical-align:middle;
}
table.dataTable tr td.dt-selector {
  line-height: 0;
}
table.dataTable tr:not(.selected) td.dt-selector svg {
  color: var(--input-border-color);
  fill: currentColor;
}
table.dataTable tr:not(.selected) td.dt-selector:hover svg {
  color: var(--dt-button-fill);
  fill: currentColor;
}
table.dataTable tr.selected td.dt-selector svg {
  color: var(--panel-accent-light);
  fill: currentColor;
}
table.dataTable tr.selected td.dt-selector:hover svg {
  color: var(--panel-accent);
  fill: currentColor;
}

.dt-container {
  padding-left: 5px;
  padding-right: 5px;
}

.dt-container .toolbar,
.dataTables_wrapper .toolbar {
  display: flex;
  align-items: center;
  margin: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dt-container .dt-edit-controls,
.dt-container .toolbar .group,
.dataTables_wrapper .toolbar .group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-basis: content;
  margin: 5px;
}
div.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dt-container,
.dataTables_wrapper {
  overflow-x: auto;
  padding-bottom: 10px;
}
.dt-container label,
.dataTables_wrapper label {
  font-weight: normal;
  font-size: 1em;
}
.dt-container .dt-length,
.dataTables_wrapper .dataTables_length {
  padding-top: 0.25em;
  font-size: var(--dt-chrome-font-size);
}
.dt-container:has(table.dt-fullscreen) {
  min-height: 300px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.dataTable>tbody>tr.child span.dtr-title {
  font-weight: 400;
}
.dataTable>tbody>tr.child ul.dtr-details {
  width: 100%;
}
.dataTable>tbody>tr.child ul.dtr-details>li {
  display: flex;
}
.dataTable>tbody>tr.child span.dtr-title {
  flex: 1;
  margin-right: 15px;
}
.dataTable>tbody>tr.child span.dtr-data {
  flex: 1;
  white-space: normal;
}

.dataTable tr td {
  cursor: pointer;
}

.dataTable tr td img.dt-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
  margin: 4px 0;
}
.dataTable tr td img.dt-icon {
  width:20px;
  height:20px;
  object-fit: contain;
}

.dataTable>thead>tr>th, 
.dataTable>thead>tr>td {
  color: var(--table-header-color);
}
.dataTable>thead>th.text-center, 
.dataTable>thead>td.text-center {
  text-align: center;
}
.dataTable>thead>th.text-right, 
.dataTable>thead>td.text-right {
  text-align: right;
}
.dataTable>thead>th.text-left, 
.dataTable>thead>td.text-left {
  text-align: left;
}

table.dataTable>tfoot>th, 
table.dataTable>tfoot>td {
  font-weight: normal;
}

table.dataTable>tfoot>tr>th {
  text-align: right;
  white-space: break-spaces;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--dt-surface-hover);
}

.dataTable input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.dataTable input[type="checkbox"]:checked {
  background: var(--panel-accent);
}
.dataTable input[type="checkbox"].status:checked {
  background: var(--green-color);
}
.dataTable input[type="checkbox"]:checked::after {
  top: 0;
  left: 0;
  content: "";
  border: 3px solid var(--primary-button-color);
  width: 16px;
  height: 16px;
}
.dataTable input[type="checkbox"]:focus {
  border-color: var(--panel-accent-border);
}

.pane-button {
  display: flex;
  align-items: center;
}
.pane-button svg {
  width: 24px;
  height: 24px;
}
.pane-button span {
  margin-left: 5px;
}
.dtsp-titleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.dtsp-title {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}

/* processing */
div.dt-processing,
.dataTables_processing {
  color: transparent!Important;
  z-index: -1;
  display: none!Important;
}

div.dt-processing>div:last-child>div:nth-child(1),
div.dt-processing>div:last-child>div:nth-child(2),
div.dt-processing>div:last-child>div:nth-child(3),
div.dt-processing>div:last-child>div:nth-child(4),
div.dataTables_processing>div:last-child>div:nth-child(1),
div.dataTables_processing>div:last-child>div:nth-child(2),
div.dataTables_processing>div:last-child>div:nth-child(3),
div.dataTables_processing>div:last-child>div:nth-child(4) {
  margin-top: 20px;
  background-color: var(--menu-color);
}

/* searchPanes */
div.dtsp-searchPane:has(tr.selected) div.dtsp-topRow.dtsp-bordered {
  border: 1px solid var(--danger-color);
}
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane {
  position: relative;
}
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dt-container,
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_wrapper {
  position: absolute;
  z-index: 2;
  background: var(--dt-surface-raised);
  box-shadow: var(--panel-shadow);
}
div.dtsp-panesContainer .dtsp-showAll {
  /* hide show all panes */
  display: none;
}

/* buttons */
.dt-column-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  padding: 8px;
  background: none;
  cursor: pointer;
  font-size: var(--dt-chrome-font-size);
  color: var(--table-header-color);
  width: 100%;
  border: 1px solid var(--dt-border-color);
  svg {
    fill: var(--table-header-color);
    width: auto;
    height: 18px;
    cursor: pointer;    
  }
  &:hover {
    background-color: var(--dt-surface-button-hover);
    border-color: var(--dt-border-color);
    color: var(--panel-text);
    svg {
      fill: var(--panel-text);
    }
  }
}
div.dt-buttons>.dt-button, 
div.dt-buttons>div.dt-button-split .dt-button {
  background: none;
  border: none;
  border-radius: 4px;
  min-width: 36px;
  min-height: 36px;
  line-height: 0;
  margin: 0;
  padding: 0 4px;
 /* display: flex;
  justify-content: center;
  align-items: center;*/
}
td>div.dt-buttons>.dt-button, 
td>div.dt-buttons>div.dt-button-split .dt-button {
  border: 1px solid transparent;
}
td>div.dt-buttons>.dt-button:hover:not(.disabled):not([disabled]),
td>div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled):not([disabled]) {
  border: 1px solid var(--dt-border-color);
  background-color: var(--dt-surface-raised);
}

div.dt-buttons>.dt-button svg {
  height: 20px;
  color: var(--dt-button-fill);
  fill: currentColor;
}
td>div.dt-buttons>.dt-button svg {
  height: 18px;
}
div.dt-buttons>.dt-button span:has(+ span.dt-button-down-arrow) {
  display: inline;
}
div.dt-buttons>.dt-button span:not(.dt-button-down-arrow) {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.dt-buttons>.dt-button span>span {
  margin-right: 5px;
}
div.dt-buttons>.dt-button[disabled],
div.dt-buttons>.dt-button.disabled,
div.dt-buttons>.dt-button[disabled]:hover, 
div.dt-buttons>.dt-button.disabled:hover, 
div.dt-buttons>div.dt-button-split .dt-button[disabled]:hover, 
div.dt-buttons>div.dt-button-split .dt-button.disabled:hover {
  background: none;
  background-color: transparent;
  cursor:not-allowed;
  border: none;
}
div.dt-buttons>.dt-button:hover:not(.disabled):not([disabled]), 
div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled):not([disabled]) {
  background: none;
  background-color: var(--dt-surface-button-hover);
  border: none;
}
div.dt-buttons>.dt-button[disabled] svg,
div.dt-buttons>.dt-button.disabled svg,
div.dt-buttons>.dt-button[disabled]:hover svg, 
div.dt-buttons>.dt-button.disabled:hover svg, 
div.dt-buttons>div.dt-button-split .dt-button[disabled]:hover svg, 
div.dt-buttons>div.dt-button-split .dt-button.disabled:hover svg {
  color: var(--disabled-button-color);
  fill: currentColor;
}

td>.dt-buttons {
  float: right;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* buttons container */
div.dt-buttons > div.dt-buttons {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  background-color: var(--dt-surface-raised);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--dt-border-muted);
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;  
  transition: all 0.3s ease-in-out;
}
/* Reveal the row action submenu on hover (desktop) and on tap toggle (touch: .dt-buttons-open) */
div.dt-buttons:hover > div.dt-buttons,
div.dt-buttons > div.dt-buttons:hover,
div.dt-buttons.dt-buttons-open > div.dt-buttons {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dt-buttons .dt-switch {
  display: flex;
  align-items: center;
}
.dt-buttons .dt-switch .dt-switch-label {
  margin-left: 0;
  margin-right: 10px;
}
.dt-buttons .dt-switch .switch {
  margin: 0;
}

.dt-edit-controls .dt-switch {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.dt-edit-controls .dt-switch>.switch {
  margin: 5px 15px 5px 10px;
}
label.dt-switch-label {
  font-size: 0.88em;
  margin-bottom: 0;
  margin-left: 10px;
}

/* add button */
.dt-buttons>.dt-button.dt-add-button svg {
  color: var(--dt-icon-add);
  fill: currentColor;
}
/* refresh button */
.dt-buttons>.dt-button.dt-refresh-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* calendar button (e.g. event list → calendar view) */
.dt-buttons>.dt-button.dt-calendar-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* clone button */
.dt-buttons>.dt-button.dt-clone-button svg {
  color: var(--dt-icon-info);
  fill: currentColor;
}
/* copy button */
.dt-buttons>.dt-button.dt-copy-button svg,
.dt-buttons>.dt-button.buttons-copy svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* import button */
.dt-buttons>.dt-button.dt-import-button svg {
  color: var(--dt-icon-add);
  fill: currentColor;
}
/* export button */
.dt-buttons>.dt-button.dt-export-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* bulk action button */
.dt-buttons>.dt-button.dt-bulk-action-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* column config button */
.dt-buttons>.dt-button.dt-column-config-button svg {
  color: var(--dt-icon-edit);
  fill: currentColor;
}
/* clear column filters button */
.dt-buttons>.dt-button.dt-clear-filters-button svg {
  color: var(--dt-icon-danger);
  fill: currentColor;
}
/* colvis button */
.dt-buttons>.dt-button.dt-colvis-button svg,
.dt-buttons>.dt-button.buttons-colvis svg {
  color: var(--dt-icon-info);
  fill: currentColor;
}
/* grouping button */
.dt-buttons>.dt-button.dt-grouping-button svg {
  color: var(--dt-icon-info);
  fill: currentColor;
}
/* reset view button */
.dt-buttons>.dt-button.dt-reset-view-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
/* edit button */
.dt-buttons>.dt-button.dt-edit-button svg {
  color: var(--dt-icon-edit);
  fill: currentColor;
}
/* excel export button */
.dt-buttons>.dt-button.dt-excel-button svg {
  color: var(--dt-icon-excel);
  fill: currentColor;
}

.dt-buttons>.dt-button>.dt-edit-button {
  height: 36px;
  background-color: var(--dt-icon-edit);
  -webkit-mask: url(/../image/icons/edit.svg) no-repeat center;
  mask: url(/../image/icons/edit.svg) no-repeat center;  
}
  /* info button */
.dt-buttons>.dt-button.dt-info-button svg {
  color: var(--dt-icon-info);
  fill: currentColor;
}
/* delete button */
.dt-buttons>.dt-button>.dt-del-button {
  height: 16px;
  background-color: var(--dt-icon-danger);
  -webkit-mask: url(/../image/icons/delete.svg) no-repeat center;
  mask: url(/../image/icons/delete.svg) no-repeat center;  
}
.dt-buttons>.dt-button.dt-del-button svg {
  color: var(--dt-icon-danger);
  fill: currentColor;
}
/* check button */
.dt-buttons>.dt-button.dt-check-button svg {
  color: var(--dt-icon-success);
  fill: currentColor;
  width: 18px;
  height: 18px;
}
/* xmark button */
.dt-buttons>.dt-button.dt-xmark-button svg {
  color: var(--dt-icon-danger);
  fill: currentColor;
  width: 18px;
  height: 18px;
}
/* dash button */
.dt-buttons>.dt-button.dt-dash-button svg {
  color: var(--dt-icon-default, currentColor);
  fill: currentColor;
  width: 18px;
  height: 18px;
}
/* attach button */
.dt-buttons>.dt-button.dt-attach-button svg {
  color: var(--dt-icon-default, currentColor);
  fill: currentColor;
  width: 18px;
  height: 18px;
}
/* close button */
.dt-buttons>.dt-button.dt-close-button svg {
  color: var(--dt-icon-danger);
  fill: currentColor;
}
/* unlock button */
.dt-buttons>.dt-button.dt-unlock-button svg {
  color: var(--dt-icon-danger);
  fill: currentColor;
}
/* save button */
.dt-buttons>.dt-button.dt-save-button svg {
  color: var(--dt-icon-info);
  fill: currentColor;
}
/* print button */
.dt-buttons>.dt-button.dt-print-button svg {
  color: var(--dt-icon-link);
  fill: currentColor;
}
.dt-buttons>.dt-button.dt-print-original-button svg {
  color: var(--dt-icon-success);
  fill: currentColor;
}
.dt-buttons>.dt-button.buttons-pdf svg,
.dt-buttons>.dt-button.dt-pdf-button svg {
  color: var(--dt-icon-pdf);
  fill: currentColor;
}
.dt-buttons>.dt-button.dt-copy-whatsapp-button svg,
.dt-buttons>.dt-button.buttons-copy-whatsapp svg {
  color: var(--dt-icon-success);
  fill: currentColor;
}
.dt-buttons>.dt-button.dt-grid-planilla-button svg {
  color: var(--dt-icon-default, currentColor);
  fill: currentColor;
  width: 16px;
  height: 16px;
}

/* popup button */
.dt-buttons>.dt-button>.dt-popup-button {
  height: 18px;
  background-color: var(--dt-icon-link);
  -webkit-mask: url(/../image/icons/popup.svg) no-repeat center;
  mask: url(/../image/icons/popup.svg) no-repeat center;
}

.dt-buttons>.dt-button.dt-popup-button {
  height: 36px;
  background-color: var(--dt-icon-link);
  -webkit-mask: url(/../image/icons/popup.svg) no-repeat center;
  mask: url(/../image/icons/popup.svg) no-repeat center;
}

.dt-buttons>.dt-button>.dt-transfer-button {
  height: 18px;
  background-color: var(--dt-icon-link);
  -webkit-mask: url(/../image/icons/transfer.svg) no-repeat center;
  mask: url(/../image/icons/transfer.svg) no-repeat center;
}

.dt-buttons>.dt-button>.dt-withdrawal-button {
  height: 16px;
  background-color: var(--dt-icon-info);
  -webkit-mask: url(/../image/icons/withdrawal.svg) no-repeat center;
  mask: url(/../image/icons/withdrawal.svg) no-repeat center;
}

.dt-buttons>.dt-button>.dt-adjustment-button {
  height: 16px;
  background-color: var(--dt-icon-edit);
  -webkit-mask: url(/../image/icons/adjustment.svg) no-repeat center;
  mask: url(/../image/icons/adjustment.svg) no-repeat center;
}

/* changed cell */
td.dt-changed{
  outline: 2px solid var(--danger-color);
  outline-offset: -2px;
}

/* page */
div.dt-container .dt-paging .dt-paging-button.current, 
div.dt-container .dt-paging .dt-paging-button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: none;
  border: 1px solid var(--dt-border-color);
  border-radius: 4px;
}

div.dt-container .dt-paging .dt-paging-button,
.dataTables_paginate .paginate_button {
  font-size: var(--dt-chrome-font-size);
  padding: 6px 10px;
}
div.dt-container .dt-paging .dt-paging-button:not(.disabled) svg,
.dataTables_paginate .paginate_button:not(.disabled) svg { 
  color: var(--dt-button-fill);
  fill: currentColor;
}
div.dt-container .dt-paging .dt-paging-button.disabled svg,
.dataTables_paginate .paginate_button.disabled svg { 
  color: var(--dt-paging-disabled-fill);
  fill: currentColor;
}
div.dt-container .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: unset!Important;
  border: 1px solid var(--dt-border-color);
  background: none;
  background-color: var(--dt-paging-hover-bg);
}

/* info */
.dt-info,
.dataTables_info {
  font-size: var(--dt-chrome-font-size);
}

table.table.dataTable table.table.dataTable.child-table {
  padding-left: 50px;
  width:100%;
  font-size: var(--dt-cell-font-size);
  background-color: var(--child-table-backcolor);
}
table.table.dataTable>tbody>tr:has(table.table.dataTable.child-table) {
  background-color: var(--child-table-backcolor);
}

table.dataTable.no-header thead {
  display:none;
}

table.dataTable.no-padding-right tbody td {
  padding-right: 0;
}

table.dataTable.no-border tbody td,
table.dataTable.no-border {
  border: none;
}

/* hide column and cell selected info */
div.dt-container span.select-item:nth-child(2), 
div.dt-container span.select-item:nth-child(3),
div.dataTables_wrapper span.select-item:nth-child(2), 
div.dataTables_wrapper span.select-item:nth-child(3) {
  display: none;
}
/*
div.dt-button-collection {
  padding: 4px 0px;
}
  */

div.dt-button-collection[role="dialog"] {
  width: auto;
  margin-right: 10px;
  padding: 4px 0px;
}
div.dt-button-collection .dt-button.buttons-columnVisibility {
  font-size: var(--dt-chrome-font-size);
  padding: 4px 8px;
}
div.dt-button-collection .dt-button.buttons-columnVisibility span {
  margin-right: 30px;
}

@media screen and (max-width: 767px) {
  .pane-button span {
      display: none;
  }
}

/* Inline cell editors (price, qty, text, select) — theme tokens, not browser defaults */
.dataTable input.dt-edit-input,
.dataTable select.dt-edit-select,
.dt-edit-input,
.dt-edit-select {
  color: var(--input-text-color);
  background-color: var(--panel-head-backcolor);
  background-image: none;
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-radius);
  box-shadow: none;
  padding: var(--input-tbpadding, 5px) var(--input-lrpadding, 5px);
  font-family: var(--font-family);
  font-size: 1em;
  line-height: 1.3;
}

.dataTable input.dt-edit-input:focus,
.dataTable select.dt-edit-select:focus,
.dt-edit-input:focus,
.dt-edit-select:focus {
  color: var(--input-text-color);
  background-color: var(--panel-head-backcolor);
  border-color: var(--input-selected-color);
  box-shadow: var(--input-shadow);
  outline: 0;
}

.dataTable input.dt-edit-input::placeholder,
.dt-edit-input::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

table.dataTable td label.switch {
  margin: 2px;    
}

.dataTables_filter {
  font-size: var(--dt-chrome-font-size);
}

table.dataTable div.dt-column-header {
  flex-direction: row!important;
}

table.dataTable span.dt-column-order {
  margin-right: 5px !important;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  color: var(--dt-column-order-icon);
  opacity: var(--dt-column-order-icon-opacity);
}

table.dataTable thead > tr > th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover span.dt-column-order:after {
  color: var(--dt-column-order-icon-hover);
  opacity: var(--dt-column-order-icon-hover-opacity);
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  color: var(--dt-column-order-icon-active);
  opacity: var(--dt-column-order-icon-active-opacity);
}

/* search panes */
div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-name,
div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-pill {
  cursor: pointer;
}

td .table-status-cell {
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;  
  line-height: 1.3rem;
  margin: 4px;
  max-width: 300px;
  color: var(--status-cell-text, var(--dt-text-on-accent));
}
td .table-balance-cell {
  border-radius: 4px;
  padding: 4px 6px;
  text-align: right;
  font-weight: 700;
  font-size: 0.9em; 
  line-height: 1.3rem;
  margin: 4px;
  color: var(--status-cell-text, var(--dt-text-on-accent));
  max-width: 11em;
}
td.dt-right .table-balance-cell {
  margin-left: auto;
  margin-right: 0;
}
td.dt-left .table-balance-cell {
  margin-left: 0;
  margin-right: auto;
}
td .red-cell,
td .table-status-cell.red-cell {
  color: var(--status-cell-text, var(--dt-text-on-accent));
  background-color: var(--status-cell-danger-bg, var(--red-color));
}
td .green-cell,
td .table-status-cell.green-cell {
  color: var(--status-cell-text, var(--dt-text-on-accent));
  background-color: var(--status-cell-success-bg, var(--green-color));
}
td .yellow-cell,
td .table-status-cell.yellow-cell {
  color: var(--status-cell-text, var(--dt-text-on-accent));
  background-color: var(--status-cell-warning-bg, var(--yellow-color));
}
td .neutral-cell,
td .table-status-cell.neutral-cell {
  color: var(--status-cell-text, var(--dt-text-on-accent));
  background-color: var(--status-cell-neutral-bg, var(--panel-text-muted));
}
.dt-searchable-input+button.form-button>svg,
.dt-searchable-field + button.form-button > svg {
  color: var(--table-header-color);
  fill: currentColor;
}

/* Title overlay: real span.dt-column-title (same element as non-searchable headers) */
table.dataTable thead th.dt-searchable .dt-searchable-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

table.dataTable thead th.dt-searchable .dt-searchable-field > .dt-column-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--table-header-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide title while typing / when filter value is present (placeholder is a single space) */
table.dataTable thead th.dt-searchable .dt-searchable-field:has(.dt-searchable-input:focus) > .dt-column-title,
table.dataTable thead th.dt-searchable .dt-searchable-field:has(.dt-searchable-input:not(:placeholder-shown)) > .dt-column-title {
  visibility: hidden;
}

.dt-searchable-input::placeholder {
  color: transparent;
  opacity: 0;
}

/* Highlight header when column has active filter */
th.dt-searchable.dt-column-filtered {
  background-color: var(--dt-accent-soft) !important;
  border-bottom: 2px solid var(--dt-accent) !important;
}

/* Granular permissions styling */
td.dt-restricted {
  cursor: not-allowed !important;  
}

td.dt-restricted:hover {
  background-color: var(--dt-surface-hover) !important;
}

.dt-filters-modal .help-block {
  font-size: 1em;
  margin-bottom: 20px;
}

.dt-filters-modal .btn-group {
  margin-bottom: 10px;
  margin-top: 20px;
}

.dt-filters-modal .form-group-v2:has(select) {
  max-width: 400px;
  min-width: 250px;
}
.dt-filters-modal .input-bill-number {
  max-width: 200px;
  min-width: 150px;
}
.dt-filters-modal .input-customers {
  max-width: 500px;
  min-width: 250px;
}
.dt-filters-modal .quick-date-buttons {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dt-filters-modal .quick-date-buttons .btn-group-sm {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn {
  font-size: 0.6875em;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn:hover {
  background-color: var(--yellow-color) !important;
  color: var(--dt-text-on-accent) !important;
  border-color: var(--yellow-color) !important;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn.active {
  background-color: var(--yellow-color) !important;
  color: var(--dt-text-on-accent) !important;
  border-color: var(--yellow-color) !important;
  box-shadow: var(--panel-shadow);
}

/* Scrollable filter modals: lists, reports, and any screen using .dt-filters-modal */
.dt-filters-modal .modal-dialog {
  margin: 16px auto;
  width: calc(100% - 32px);
  max-width: 1100px;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.dt-filters-modal .modal-content {
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dt-filters-modal .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
/* bootstrap-select with data-container="body" (.bs-container): one scroll on ul.inner only.
   Outer menu clips only; no max-height on shell — live-search .bs-searchbox shares the block
   and a fixed inner max-height avoids ul.inner taller than .dropdown-menu.
   Reset margin-top/margin-bottom on .inner — bootstrap-select uses them for virtual positioning
   and they push options off-screen when .inner is the scroll container. */
/* Above #header (1200) / menu flyouts (~1201); below .modal-backdrop (1400).
 * body.modal-open raises this to 1450 in modal.css. */
.dt-filters-modal .modal-body .bootstrap-select .dropdown-menu:not(.inner),
.bootstrap-select.bs-container .dropdown-menu:not(.inner) {
  z-index: 1250 !important;
  overflow: hidden !important;
  max-height: none !important;
}
.dt-filters-modal .modal-body .bootstrap-select ul.dropdown-menu.inner,
.bootstrap-select.bs-container ul.dropdown-menu.inner {
  max-height: min(260px, calc(100vh - 140px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.dt-filters-modal .modal-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 12px 15px;
  text-align: right;
  background: var(--modal-footer-backcolor);
  border-top: 1px solid var(--modal-border-color);
}
.dt-filters-modal .modal-footer .btn-group {
  margin: 0;
  float: none;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
/* Legacy layouts: action buttons still inside .modal-body */
.dt-filters-modal .modal-body > .btn-group.align-right:last-child {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--modal-body-backcolor);
  padding: 12px 0 4px;
  margin-top: 16px;
  margin-bottom: 0;
  border-top: 1px solid var(--modal-border-color);
}

.partial-credit-note-filter-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  width: 100%;
  align-items: flex-start;
}
.partial-credit-note-filter-switches .partial-cn-filter-item {
  flex: 1 1 280px;
  max-width: 100%;
  min-width: 220px;
}
.partial-credit-note-filter-switches .partial-cn-filter-item .control-label-v2 {
  white-space: normal;
  line-height: 1.35;
}

.dt-filter-button:not(.has-filters):not(.has-filters-default):not(.disabled):not([disabled]) {
  background-color: transparent;
  border-color: transparent;
}
.dt-filter-button:not(.has-filters):not(.has-filters-default):not(.disabled):not([disabled]) svg {
  color: var(--dt-button-fill);
  fill: currentColor;
}

.dt-buttons>.dt-filter-button:not(.has-filters):not(.has-filters-default):hover:not(.disabled):not([disabled]) {
  background-color: var(--dt-surface-button-hover);
}
.dt-buttons>.dt-filter-button:not(.has-filters):not(.has-filters-default):hover:not(.disabled):not([disabled]) svg {
  color: var(--dt-button-fill);
  fill: currentColor;
}

/* Non-empty filters matching list defaults (e.g. open daily cash registers) */
.dt-filter-button.has-filters-default:not(.disabled):not([disabled]) {
  background-color: var(--dt-filter-button-default-bg) !important;
  border-color: var(--dt-filter-button-default-border) !important;
}
.dt-filter-button.has-filters-default:not(.disabled):not([disabled]) svg {
  color: var(--dt-filter-button-default-icon) !important;
  fill: currentColor;
}
.dt-filter-button.has-filters-default:hover:not(.disabled):not([disabled]) {
  background-color: var(--dt-filter-button-default-hover-bg) !important;
  border-color: var(--dt-filter-button-default-hover-border) !important;
}
.dt-filter-button.has-filters-default:hover:not(.disabled):not([disabled]) svg {
  color: var(--dt-filter-button-default-hover-icon) !important;
  fill: currentColor;
}

/* Non-empty filters that differ from list defaults */
.dt-filter-button.has-filters:not(.disabled):not([disabled]) {
  background-color: var(--dt-filter-button-active-bg) !important;
  border-color: var(--dt-filter-button-active-border) !important;    
}
.dt-filter-button.has-filters:not(.disabled):not([disabled]) svg {
  color: var(--dt-filter-button-active-icon) !important;
  fill: currentColor;
}
.dt-filter-button.has-filters:hover:not(.disabled):not([disabled]) svg {
  color: var(--dt-filter-button-active-hover-icon) !important;
  fill: currentColor;
}
.dt-filter-button.has-filters:hover:not(.disabled):not([disabled]) {
  background-color: var(--dt-filter-button-active-hover-bg) !important;
  border-color: var(--dt-filter-button-active-hover-border) !important;
}

/* Column configuration modal (manageDatatable getDTColumnConfigButton) */
.dt-column-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--dt-border-color);
  border-radius: 4px;
  padding: 10px;
}
.dt-column-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin: 4px 0;
  background: var(--dt-surface-muted);
  border: 1px solid var(--dt-border-color);
  border-radius: 4px;
  cursor: move;
  transition: background-color 0.2s;
}
.dt-column-item:hover {
  background: var(--dt-surface-hover);
}
.dt-column-item.ui-sortable-helper {
  background: var(--dt-accent-soft);
  box-shadow: var(--panel-shadow);
}
.dt-column-item.ui-sortable-placeholder {
  background: var(--dt-accent-soft);
  border: 2px dashed var(--yellow-color);
  height: 40px;
}
.dt-column-handle {
  margin-right: 10px;
  color: var(--dt-text-muted);
  cursor: move;
  touch-action: none;
  -webkit-touch-callout: none;
}
.dt-column-checkbox {
  margin-right: 10px;
  touch-action: manipulation;
}
.dt-column-title {
  flex: 1;
  font-weight: 500;
  touch-action: none;
  -webkit-touch-callout: none;
}
/* Prevent page/modal scroll while dragging a column chip on touch devices */
body.dt-column-sorting {
  overflow: hidden;
}
body.dt-column-sorting .dt-column-list {
  touch-action: none;
}
.dt-column-info {
  font-size: 0.75em;
  color: var(--dt-text-muted);
  margin-left: 10px;
}
.dt-column-item.dt-column-hidden .dt-column-title {
  color: var(--dt-paging-disabled-fill);
  text-decoration: line-through;
}
.dt-column-item.dt-column-hidden {
  opacity: 0.6;
  background-color: var(--dt-surface-hover);
}
#dt-column-config-modal * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#dt-column-config-modal input[type="checkbox"] {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* Clear icon in column search / search panes */
.dt-search-clear-button svg {
  color: var(--dt-button-fill);
  fill: currentColor;
}

@keyframes oscillate {
  0% {
    transform: translateX(var(--uib-center)) scale(0);
    opacity: 0.25;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}