/**
 * theme-tables.css
 * INFOBMS global table design system — golden standard: /healthcare/medicines
 *
 * Medicines look: card-wrapped Bootstrap table + table-striped + DataTables chrome,
 * theme-aware surfaces, BCS primary soft hover, unified pagination (theme-pagination.css).
 *
 * Load AFTER theme-components.css and theme-pagination.css.
 * Tokens only — no hardcoded whites / brand blues.
 */

/* ── Table tokens (Medicines / HMS-aligned, BCS-aware) ── */
:root {
  --pos-table-bg: transparent;
  --pos-table-text: var(--pos-text-primary, var(--text-primary, #111827));
  --pos-table-header-bg: var(--pos-bg-surface-alt, var(--bg-table-head, #f8f9fa));
  --pos-table-header-text: var(--pos-text-heading, var(--text-heading, #0f172a));
  --pos-table-border: var(--pos-border, var(--border-color, #dee2e6));
  --pos-table-row-bg: var(--pos-bg-surface, var(--bg-table-row, #ffffff));
  --pos-table-row-stripe: var(--pos-bg-surface-alt, var(--bg-table-alt, #f8f9fa));
  /* Medicines hover: soft Business Color Scheme tint */
  --pos-table-row-hover: color-mix(in srgb, var(--btn-primary-bg, #3b82f6) 12%, transparent);
  --pos-table-row-selected: color-mix(in srgb, var(--btn-primary-bg, #3b82f6) 18%, transparent);
  --pos-table-radius: 0.5rem;
  --pos-table-cell-py: 0.75rem;
  --pos-table-cell-px: 0.85rem;
  --pos-table-font-size: 0.875rem;
  --pos-table-header-weight: 600;

  --pos-dt-header-bg: var(--pos-table-header-bg);
  --pos-dt-header-text: var(--pos-table-header-text);
  --pos-dt-border: var(--pos-table-border);
  --pos-dt-row-text: var(--pos-table-text);
  --pos-dt-info-text: var(--pos-text-muted, var(--text-secondary, #6c757d));
  --pos-dt-search-text: var(--pos-text-primary, var(--text-primary, #111827));
}

body.dark-mode,
[data-bs-theme="dark"],
[data-theme="dark"] {
  --pos-table-bg: transparent;
  --pos-table-text: var(--pos-text-primary, var(--text-primary, #d8dfee));
  --pos-table-header-bg: var(--pos-bg-surface-alt, #1a1a2e);
  --pos-table-header-text: var(--pos-text-heading, var(--text-heading, #e2e8f0));
  --pos-table-border: var(--pos-border, #2c2c50);
  --pos-table-row-bg: var(--pos-bg-surface, #0d0d0d);
  --pos-table-row-stripe: rgba(255, 255, 255, 0.04);
  --pos-table-row-hover: color-mix(in srgb, var(--btn-primary-bg, #60a5fa) 16%, transparent);
  --pos-table-row-selected: color-mix(in srgb, var(--btn-primary-bg, #60a5fa) 22%, transparent);
  --pos-dt-header-bg: var(--pos-table-header-bg);
  --pos-dt-header-text: var(--pos-table-header-text);
  --pos-dt-border: var(--pos-table-border);
  --pos-dt-row-text: var(--pos-table-text);
  --pos-dt-info-text: var(--pos-text-muted, #9aa4bf);
  --pos-dt-search-text: var(--pos-table-text);
}

/* ── Card container (Medicines: .card > .card-body > table) ── */
.card:has(> .card-body > .table),
.card:has(> .card-body > .table-responsive),
.card:has(> .card-body > .dataTables_wrapper),
.box:has(> .box-body > .table),
.box:has(> .box-body > .dataTables_wrapper) {
  border-radius: var(--pos-table-radius);
  overflow: hidden;
}

.card-body:has(> .table),
.card-body:has(> .table-responsive),
.card-body:has(> .dataTables_wrapper),
.box-body:has(> .table),
.box-body:has(> .dataTables_wrapper) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ── Base table (Medicines) ── */
.table,
table.table,
table.dataTable {
  --bs-table-color: var(--pos-table-text);
  --bs-table-bg: var(--pos-table-bg);
  --bs-table-border-color: var(--pos-table-border);
  --bs-table-striped-color: var(--pos-table-text);
  --bs-table-striped-bg: var(--pos-table-row-stripe);
  --bs-table-hover-color: var(--pos-table-text);
  --bs-table-hover-bg: var(--pos-table-row-hover);
  --bs-table-active-color: var(--pos-table-text);
  --bs-table-active-bg: var(--pos-table-row-selected);

  width: auto !important;
  min-width: 100%;
  color: var(--pos-table-text) !important;
  background-color: var(--pos-table-bg) !important;
  border-color: var(--pos-table-border) !important;
  font-size: var(--pos-table-font-size);
  margin-bottom: 0;
}

.table thead th,
.table th,
table.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--pos-table-header-bg) !important;
  color: var(--pos-table-header-text) !important;
  border-color: var(--pos-table-border) !important;
  font-weight: var(--pos-table-header-weight) !important;
  padding: var(--pos-table-cell-py) var(--pos-table-cell-px) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

.table tbody td,
table.table tbody td,
table.dataTable tbody td {
  color: var(--pos-table-text) !important;
  border-color: var(--pos-table-border) !important;
  background-color: var(--pos-table-row-bg) !important;
  padding: var(--pos-table-cell-py) var(--pos-table-cell-px) !important;
  vertical-align: middle !important;
}

/* Medicines uses table-striped — apply stripe to all data tables for parity */
.table > tbody > tr:nth-of-type(odd) > td,
.table > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--pos-table-row-stripe);
  background-color: var(--pos-table-row-stripe) !important;
  color: var(--pos-table-text) !important;
}

.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th,
.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > td {
  background-color: var(--pos-table-row-hover) !important;
  color: var(--pos-table-text) !important;
}

.table > tbody > tr.selected > td,
.table > tbody > tr.active > td,
table.dataTable tbody tr.selected > td {
  background-color: var(--pos-table-row-selected) !important;
}

/* Kill AdminLTE / Bootstrap hardcoded light chrome */
.table-bordered,
.table-bordered > :not(caption) > * > *,
.table-light,
.table-light > :not(caption) > * > *,
.table-dark,
.table-dark > :not(caption) > * > * {
  border-color: var(--pos-table-border) !important;
  color: var(--pos-table-text) !important;
}

.table-light,
.table-light > :not(caption) > * {
  --bs-table-bg: var(--pos-table-header-bg) !important;
  --bs-table-color: var(--pos-table-header-text) !important;
  background-color: var(--pos-table-header-bg) !important;
  color: var(--pos-table-header-text) !important;
}

body.dark-mode .table-dark,
body.dark-mode .table-dark > :not(caption) > * {
  --bs-table-bg: var(--pos-table-header-bg) !important;
  --bs-table-color: var(--pos-table-text) !important;
  background-color: var(--pos-table-header-bg) !important;
  color: var(--pos-table-text) !important;
}

/* ── Responsive wrapper ── */
.table-responsive {
  border-color: var(--pos-table-border);
  -webkit-overflow-scrolling: touch;
}

/* ── DataTables chrome (Medicines defaults) ── */
.dataTables_wrapper {
  color: var(--pos-table-text) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
  color: var(--pos-dt-info-text) !important;
  font-size: var(--pos-table-font-size);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--pos-input-bg, var(--bg-input, var(--pos-bg-surface))) !important;
  color: var(--pos-dt-search-text) !important;
  border: 1px solid var(--pos-input-border, var(--pos-table-border)) !important;
  border-radius: 0.375rem !important;
  padding: 0.35rem 0.6rem !important;
  min-height: 2.25rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--pos-border-focus, var(--btn-primary-bg)) !important;
  outline: 0;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--btn-primary-bg, #3b82f6) 25%, transparent) !important;
}

.dataTables_wrapper .dataTables_processing {
  background: var(--pos-bg-surface, var(--bg-card)) !important;
  border: 1px solid var(--pos-table-border) !important;
  color: var(--pos-table-text) !important;
  border-radius: var(--pos-table-radius);
}

/* Empty / zero records */
table.dataTable td.dataTables_empty {
  color: var(--pos-text-muted, var(--text-muted)) !important;
  background-color: var(--pos-table-row-bg) !important;
  padding: 2rem 1rem !important;
  text-align: center !important;
}

/* Sorting icons stay readable */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  opacity: 0.45;
}

/* ── Entity-directory / other shells: match cell chrome ── */
.ed-root table.table thead th,
.ed-root table.dataTable thead th,
.entity-directory table.table thead th {
  background-color: var(--pos-table-header-bg) !important;
  color: var(--pos-table-header-text) !important;
  border-color: var(--pos-table-border) !important;
}

.ed-root table.table tbody td,
.ed-root table.dataTable tbody td,
.entity-directory table.table tbody td {
  color: var(--pos-table-text) !important;
  border-color: var(--pos-table-border) !important;
}

/* ── Bulk action bars sitting above tables ── */
.table-actions,
.bulk-actions,
.dt-buttons,
div.dt-buttons {
  color: var(--pos-table-text);
}

div.dt-buttons .btn,
div.dt-buttons .dt-button {
  border-color: var(--pos-table-border) !important;
}

/* ── Accessibility: focus visible on interactive cells ── */
.table a:focus-visible,
.table button:focus-visible,
.dataTables_wrapper .paginate_button:focus-visible,
.dataTables_wrapper .dataTables_filter input:focus-visible,
.dataTables_wrapper .dataTables_length select:focus-visible {
  outline: 2px solid var(--btn-primary-bg, var(--pos-border-focus));
  outline-offset: 2px;
}

/* ── Checkbox column alignment (bulk select) ── */
.table td.sorting_1 input[type="checkbox"],
.table th input[type="checkbox"],
.table td input[type="checkbox"].row-select,
.table td .icheckbox_square-blue {
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   Sticky header + scroll sync (Medicines pattern)
   One real table; header and body scroll together horizontally.
   Never use separate overflow on thead vs tbody.
   ═══════════════════════════════════════════════════════════ */

.table-responsive-infobms,
.infobms-table-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.infobms-table,
.table-responsive-infobms > table.table,
.infobms-table-wrapper > table.table {
  table-layout: auto;
  width: 100%;
  margin-bottom: 0;
}

/* Sticky thead for single-table layouts (no DT scrollX split) */
.table-responsive thead th,
.table-responsive-infobms thead th,
.infobms-table-wrapper thead th,
.card-body > .dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable thead th,
.box-body > .dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable thead th,
.hms-datatable-panel-body > .dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--pos-table-header-bg, var(--bs-table-bg, #fff));
  background-clip: padding-box;
}

body.dark-mode .table-responsive thead th,
body.dark-mode .table-responsive-infobms thead th,
body.dark-mode .infobms-table-wrapper thead th,
body.dark-mode .card-body > .dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable thead th,
body.dark-mode .box-body > .dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable thead th {
  background-color: var(--pos-table-header-bg, #1e1e1e);
}

/* Kill DataTables FixedHeader floating clones (detached from body scroll) */
table.fixedHeader-floating,
table.fixedHeader-locked,
.fixedHeader-floating,
.fixedHeader-locked {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prefer one table — never independently block-display thead/tbody */
.table-responsive > table.table,
.table-responsive-infobms > table.table,
.infobms-table-wrapper > table.table {
  display: table;
}

.table-responsive > table > thead,
.table-responsive-infobms > table > thead,
.infobms-table-wrapper > table > thead {
  display: table-header-group;
}

.table-responsive > table > tbody,
.table-responsive-infobms > table > tbody,
.infobms-table-wrapper > table > tbody {
  display: table-row-group;
}

/* Do NOT force width/table-layout on DT scroll clones — that compresses headers */