/* =============================================================================
   OrganicSystem — UI-1.8 Global HTML Table Standardization
   Shared Light/Dark theme for native HTML tables (table / thead / tbody / tfoot /
   th / td / tr) and Bootstrap .table. Consumes --os-table-* / --os-color-* tokens.

   SCOPE:
   - Bootstrap data tables: table.table, .table-striped, .table-hover, …
   - Desktop form label grids: .os-desktop-form-table, .aps-site-table
   - Page table views: .os-page-table-view table

   OUT OF SCOPE (do not restyle — UI-1.7 DataGrid authority):
   - .dx-datagrid, .dx-datagrid-table, .os-dx-grid / .os-erp-grid internals

   Load AFTER os-theme-apply.css so HTML-table states win without fighting DX.
   ============================================================================= */

/* ---- Bootstrap HTML tables: surface + Bootstrap CSS variables ---- */
table.table,
.table {
  --bs-table-bg: var(--os-table-body-bg, var(--os-color-grid-body));
  --bs-table-color: var(--os-table-text, var(--os-color-text));
  --bs-table-border-color: var(--os-table-border, var(--os-color-border));
  --bs-table-striped-bg: var(--os-table-stripe-bg, var(--os-color-grid-alt-row));
  --bs-table-striped-color: var(--os-table-text, var(--os-color-text));
  --bs-table-hover-bg: var(--os-table-hover-bg, var(--os-color-grid-hover));
  --bs-table-hover-color: var(--os-table-text, var(--os-color-text));
  --bs-table-active-bg: var(--os-table-selected-bg, var(--os-color-grid-selected));
  --bs-table-active-color: var(--os-table-text, var(--os-color-text));
  background-color: var(--os-table-bg, var(--os-color-grid));
  color: var(--os-table-text, var(--os-color-text));
  border-color: var(--os-table-border, var(--os-color-border));
}

table.table > :not(caption) > * > *,
.table > :not(caption) > * > * {
  color: inherit;
  border-color: var(--os-table-border, var(--os-color-border));
  background-color: var(--os-table-body-bg, var(--os-color-grid-body));
}

/* ---- Header ---- */
table.table thead th,
table.table > thead > tr > th,
.table thead th,
.table > thead > tr > th,
.os-page-table-view thead th,
.os-page-table-view thead td {
  background-color: var(--os-table-header-bg, var(--os-color-grid-header)) !important;
  color: var(--os-table-header-text, var(--os-color-grid-header-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

/* ---- Body cells (layout padding stays in site.css) ---- */
table.table th,
table.table td,
.table th,
.table td {
  border-color: var(--os-table-border, var(--os-color-border));
  color: var(--os-table-text, var(--os-color-text));
}

/* ---- Striping (include html[data-theme] so we beat os-dark-contrast td !important) ---- */
html table.table-striped > tbody > tr:nth-of-type(odd) > *,
html table.table-striped > tbody > tr:nth-of-type(odd) > td,
html table.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--os-table-stripe-bg, var(--os-color-grid-alt-row));
  --bs-table-color-type: var(--os-table-text, var(--os-color-text));
  background-color: var(--os-table-stripe-bg, var(--os-color-grid-alt-row)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

html table.table-striped > tbody > tr:nth-of-type(even) > *,
html table.table-striped > tbody > tr:nth-of-type(even) > td,
html table.table-striped > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: var(--os-table-body-bg, var(--os-color-grid-body));
  --bs-table-color-type: var(--os-table-text, var(--os-color-text));
  background-color: var(--os-table-body-bg, var(--os-color-grid-body)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

/* ---- Hover (not selected) ---- */
html table.table-hover > tbody > tr:hover > *,
html table.table-hover > tbody > tr:hover > td,
html table.table-hover > tbody > tr:hover > th,
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--os-table-hover-bg, var(--os-color-grid-hover));
  --bs-table-color-state: var(--os-table-text, var(--os-color-text));
  background-color: var(--os-table-hover-bg, var(--os-color-grid-hover)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

/* ---- Selected / active ---- */
html table.table > tbody > tr.table-active > *,
html table.table > tbody > tr.table-active > td,
html table.table > tbody > tr.table-active > th,
html table.table > tbody > tr.active > *,
html table.table > tbody > tr.active > td,
html table.table > tbody > tr.selected > *,
html table.table > tbody > tr.selected > td,
html table.table > tbody > tr.os-row-selected > *,
html table.table > tbody > tr.os-row-selected > td,
.table > tbody > tr.table-active > *,
.table > tbody > tr.active > *,
.table > tbody > tr.selected > *,
.table > tbody > tr.os-row-selected > * {
  --bs-table-bg-state: var(--os-table-selected-bg, var(--os-color-grid-selected));
  --bs-table-color-state: var(--os-table-text, var(--os-color-text));
  background-color: var(--os-table-selected-bg, var(--os-color-grid-selected)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

/* Selected wins over hover */
html table.table-hover > tbody > tr.table-active:hover > *,
html table.table-hover > tbody > tr.table-active:hover > td,
html table.table-hover > tbody > tr.active:hover > *,
html table.table-hover > tbody > tr.selected:hover > *,
html table.table-hover > tbody > tr.os-row-selected:hover > *,
.table-hover > tbody > tr.table-active:hover > *,
.table-hover > tbody > tr.active:hover > *,
.table-hover > tbody > tr.selected:hover > *,
.table-hover > tbody > tr.os-row-selected:hover > * {
  background-color: var(--os-table-selected-bg, var(--os-color-grid-selected)) !important;
}

html table.table > tbody > tr.os-row-selected > *,
html table.table > tbody > tr.os-row-selected > td,
html table.table > tbody > tr.os-row-selected > th,
.table > tbody > tr.os-row-selected > * {
  box-shadow: inset 3px 0 0 var(--os-color-primary, #0d6efd);
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* ---- Footer ---- */
table.table tfoot td,
table.table tfoot th,
.table tfoot td,
.table tfoot th {
  background-color: var(--os-table-footer-bg, var(--os-color-grid-footer)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
  font-weight: 600;
}

/* ---- Empty state ---- */
table.table > tbody > tr.os-table-empty > td,
table.table > tbody > tr.os-table-empty > th,
.table > tbody > tr.os-table-empty > td,
.table > tbody > tr.os-table-empty > th,
table.table .os-table-empty-cell,
.table .os-table-empty-cell {
  color: var(--os-table-empty-text, var(--os-color-text-muted)) !important;
  background-color: var(--os-table-body-bg, var(--os-color-grid-body)) !important;
  font-style: italic;
  text-align: center;
}

/* ---- Loading state ---- */
table.table.is-loading,
table.table.os-table-loading,
.table.is-loading,
.table.os-table-loading,
table.table[aria-busy="true"],
.table[aria-busy="true"] {
  background-color: var(--os-table-loading-bg, var(--os-color-surface-muted));
  opacity: 0.72;
  pointer-events: none;
}

table.table.is-loading > tbody > tr > *,
table.table.os-table-loading > tbody > tr > *,
.table.is-loading > tbody > tr > *,
.table.os-table-loading > tbody > tr > *,
table.table[aria-busy="true"] > tbody > tr > *,
.table[aria-busy="true"] > tbody > tr > * {
  background-color: var(--os-table-loading-bg, var(--os-color-surface-muted)) !important;
  color: var(--os-table-empty-text, var(--os-color-text-muted)) !important;
}

/* ---- Bordered variant ---- */
table.table-bordered,
table.table-bordered > :not(caption) > * > *,
.table-bordered,
.table-bordered > :not(caption) > * > * {
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

/* ---- Desktop form / label-value tables (not Bootstrap data grids) ----
   Geometry lives in site.css; theme colors only here. */
.os-desktop-form-table,
.aps-site-table {
  background: var(--os-color-form-control-bg);
  border-color: var(--os-color-form-border);
  color: var(--os-color-form-label-text);
}

.os-desktop-form-table th,
.os-desktop-form-table td,
.aps-site-table th,
.aps-site-table td {
  border-color: var(--os-color-form-border);
}

.os-desktop-form-table th,
.aps-site-table th {
  background: var(--os-color-form-label);
  color: var(--os-color-form-label-text);
}

.os-desktop-form-table td,
.aps-site-table td {
  background: var(--os-color-form-control-bg);
  color: var(--os-color-form-label-text);
}

/* DX DataGrid internals (.dx-datagrid / .dx-datagrid-table) are intentionally
   not selected above — UI-1.7 remains the authority for those surfaces. */