/* ======================================================================
   TRADER PREMIUM DATA SURFACES — CYCLE 3/5

   Scope:
   - Tables, list density, filters, badges/statuses, totals, pagination,
     empty states and data action cells.
   - Visual/cascade changes only. No workflow, SQL, URL or AJAX changes.
   - Loaded after premium-components.css and uses semantic --ui-* tokens.
====================================================================== */

/* ----------------------------------------------------------------------
   Data cards / scroll containers
------------------------------------------------------------------------ */
html body #MainCanvas .table-card,
html body #MainCanvas [class$="-table-card"],
html body #MainCanvas [class*="-table-card "] {
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  box-shadow: var(--ui-shadow-xs) !important;
  overflow: hidden !important;
}

html body #MainCanvas [class$="-table-wrap"],
html body #MainCanvas [class*="-table-wrap "] {
  width: 100% !important;
  overflow: auto !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-gutter: stable !important;
  background: var(--ui-surface-card) !important;
}

/* ----------------------------------------------------------------------
   Core data tables
------------------------------------------------------------------------ */
html body #MainCanvas .table-card table,
html body #MainCanvas table[class$="-table"],
html body #MainCanvas table[class*="-table "],
html body #MainCanvas table.detail-table,
html body #MainCanvas table.table.data-table {
  width: 100% !important;
  border-spacing: 0 !important;
  border-collapse: separate !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

html body #MainCanvas .table-card table thead th,
html body #MainCanvas table[class$="-table"] thead th,
html body #MainCanvas table[class*="-table "] thead th,
html body #MainCanvas table.detail-table thead th,
html body #MainCanvas table.table.data-table thead th {
  min-height: 36px !important;
  padding: var(--ui-table-head-py) var(--ui-table-head-px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-data-head-bg) !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-table-head-size) !important;
  line-height: var(--ui-leading-snug) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-shadow: inset 0 -1px 0 var(--ui-divider) !important;
}

html body #MainCanvas .table-card table tbody td,
html body #MainCanvas .table-card table tfoot td,
html body #MainCanvas table[class$="-table"] tbody td,
html body #MainCanvas table[class$="-table"] tfoot td,
html body #MainCanvas table[class*="-table "] tbody td,
html body #MainCanvas table[class*="-table "] tfoot td,
html body #MainCanvas table.detail-table tbody td,
html body #MainCanvas table.detail-table tfoot td,
html body #MainCanvas table.table.data-table tbody td,
html body #MainCanvas table.table.data-table tfoot td {
  min-height: var(--ui-table-row-min-height) !important;
  padding: var(--ui-table-cell-py) var(--ui-table-cell-px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-divider) !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  font-size: var(--ui-table-font-size) !important;
  line-height: var(--ui-leading-snug) !important;
  vertical-align: middle !important;
}

html body #MainCanvas .table-card table tbody tr,
html body #MainCanvas table[class$="-table"] tbody tr,
html body #MainCanvas table[class*="-table "] tbody tr,
html body #MainCanvas table.detail-table tbody tr,
html body #MainCanvas table.table.data-table tbody tr {
  background: transparent !important;
  transition:
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard) !important;
}

html body #MainCanvas .table-card table tbody tr:nth-child(even),
html body #MainCanvas table[class$="-table"] tbody tr:nth-child(even),
html body #MainCanvas table[class*="-table "] tbody tr:nth-child(even),
html body #MainCanvas table.detail-table tbody tr:nth-child(even),
html body #MainCanvas table.table.data-table tbody tr:nth-child(even) {
  background: var(--ui-data-row-even) !important;
}

html body #MainCanvas .table-card table tbody tr:hover,
html body #MainCanvas table[class$="-table"] tbody tr:hover,
html body #MainCanvas table[class*="-table "] tbody tr:hover,
html body #MainCanvas table.detail-table tbody tr:hover,
html body #MainCanvas table.table.data-table tbody tr:hover {
  background: var(--ui-data-row-hover) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ui-accent) 66%, transparent) !important;
}

html body #MainCanvas table tbody tr[onclick],
html body #MainCanvas [class$="-row-link"],
html body #MainCanvas [class*="-row-link "] {
  cursor: pointer !important;
}

html body #MainCanvas table tbody tr[aria-selected="true"],
html body #MainCanvas table tbody tr.is-selected,
html body #MainCanvas table tbody tr.selected {
  background: var(--ui-data-row-selected) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
}

/* Keep the final data row visually closed without a heavy grid. */
html body #MainCanvas .table-card table tbody tr:last-child > td,
html body #MainCanvas table[class$="-table"] tbody tr:last-child > td,
html body #MainCanvas table[class*="-table "] tbody tr:last-child > td,
html body #MainCanvas table.detail-table tbody tr:last-child > td {
  border-bottom-color: transparent !important;
}

/* Numeric and financial columns: stable visual alignment. */
html body #MainCanvas td[data-financial-value],
html body #MainCanvas th[data-financial-value],
html body #MainCanvas [class$="-amount"],
html body #MainCanvas [class*="-amount "],
html body #MainCanvas [class$="-money"],
html body #MainCanvas [class*="-money "],
html body #MainCanvas td[align="right"],
html body #MainCanvas th[align="right"] {
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: -.006em !important;
}

html body #MainCanvas [class$="-main-text"],
html body #MainCanvas [class*="-main-text "],
html body #MainCanvas [class$="-title"],
html body #MainCanvas [class*="-title "] {
  color: var(--ui-text-strong) !important;
}

html body #MainCanvas [class$="-subhint"],
html body #MainCanvas [class*="-subhint "] {
  margin-top: 3px !important;
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-2xs) !important;
  line-height: var(--ui-leading-snug) !important;
}

/* ----------------------------------------------------------------------
   Totals / footers
------------------------------------------------------------------------ */
html body #MainCanvas table tr[class*="totals"] > td,
html body #MainCanvas table tr[class*="total-row"] > td,
html body #MainCanvas table tr.financial-total-row > td,
html body #MainCanvas table tfoot tr > td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-top: 1px solid var(--ui-data-total-border) !important;
  border-bottom: 0 !important;
  background: var(--ui-data-total-bg) !important;
  color: var(--ui-text-strong) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas table tr[class*="totals"] strong,
html body #MainCanvas table tr[class*="total-row"] strong,
html body #MainCanvas table tr.financial-total-row strong,
html body #MainCanvas table tfoot strong {
  color: inherit !important;
  font-weight: var(--ui-font-weight-bold) !important;
}

/* ----------------------------------------------------------------------
   Action cells / compact icon affordances
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-action-cell"],
html body #MainCanvas [class*="-action-cell "] {
  width: 58px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center !important;
}

html body #MainCanvas [class$="-action-icon"],
html body #MainCanvas [class*="-action-icon "] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  transition:
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    color var(--ui-duration-fast) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard) !important;
}

html body #MainCanvas tr:hover [class$="-action-icon"],
html body #MainCanvas tr:hover [class*="-action-icon "] {
  border-color: var(--ui-accent-soft-border) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}

/* ----------------------------------------------------------------------
   Summary bars / counts
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-summary-row"],
html body #MainCanvas [class*="-summary-row "] {
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 0 2px !important;
  gap: var(--ui-space-2) !important;
  color: var(--ui-text-muted) !important;
}

html body #MainCanvas [class$="-count"],
html body #MainCanvas [class*="-count "] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  line-height: 18px !important;
  font-variant-numeric: tabular-nums !important;
}

html body #MainCanvas [class$="-search-state"],
html body #MainCanvas [class*="-search-state "] {
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-medium) !important;
}

/* ----------------------------------------------------------------------
   Filters — segmented, quiet until selected
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-filters-card"],
html body #MainCanvas [class*="-filters-card "] {
  padding: var(--ui-space-3) !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

html body #MainCanvas [class$="-filters-title"],
html body #MainCanvas [class*="-filters-title "] {
  margin-bottom: 9px !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

html body #MainCanvas [class$="-filters-row"],
html body #MainCanvas [class*="-filters-row "] {
  gap: 6px !important;
}

html body #MainCanvas [class$="-filter-btn"],
html body #MainCanvas [class*="-filter-btn "] {
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-color: var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas [class$="-filter-btn"]:hover,
html body #MainCanvas [class*="-filter-btn "]:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-hover) !important;
  color: var(--ui-text-strong) !important;
}

html body #MainCanvas [class$="-filter-btn"].is-active,
html body #MainCanvas [class*="-filter-btn "].is-active,
html body #MainCanvas [class$="-filter-btn"][aria-pressed="true"],
html body #MainCanvas [class*="-filter-btn "][aria-pressed="true"] {
  border-color: var(--ui-accent-soft-border) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 8%, transparent) !important;
}

/* Active query/filter chips generated by list screens. */
html body #MainCanvas [class$="-entity-filter"],
html body #MainCanvas [class*="-entity-filter "] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--ui-accent-soft-border) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

/* ----------------------------------------------------------------------
   Badges / compact status semantics
------------------------------------------------------------------------ */
html body #MainCanvas span.badge,
html body #MainCanvas [class$="-badge"],
html body #MainCanvas [class*="-badge "] {
  min-height: 26px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  font-size: var(--ui-font-size-2xs) !important;
  line-height: 16px !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .012em !important;
}

html body #MainCanvas .badge-success,
html body #MainCanvas .label-success,
html body #MainCanvas [class*="-badge"].is-success,
html body #MainCanvas [class*="-badge"].success {
  border-color: var(--ui-success-soft-border) !important;
  background: var(--ui-success-soft) !important;
  color: var(--ui-success) !important;
}

html body #MainCanvas .badge-danger,
html body #MainCanvas .label-danger,
html body #MainCanvas [class*="-badge"].is-danger,
html body #MainCanvas [class*="-badge"].danger {
  border-color: var(--ui-danger-soft-border) !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
}

html body #MainCanvas .badge-warning,
html body #MainCanvas .label-warning,
html body #MainCanvas [class*="-badge"].is-warning,
html body #MainCanvas [class*="-badge"].warning {
  border-color: var(--ui-warning-soft-border) !important;
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}

html body #MainCanvas .badge-info,
html body #MainCanvas .label-info,
html body #MainCanvas [class*="-badge"].is-info,
html body #MainCanvas [class*="-badge"].info {
  border-color: var(--ui-info-soft-border) !important;
  background: var(--ui-info-soft) !important;
  color: var(--ui-info) !important;
}

html body #MainCanvas [class$="-badge"] a,
html body #MainCanvas [class*="-badge "] a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------------------------
   Alerts / one-shot status messages
------------------------------------------------------------------------ */
html body #MainCanvas .alert,
html body #MainCanvas [class$="-flash"],
html body #MainCanvas [class*="-flash "] {
  padding: 10px 12px !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  font-size: var(--ui-font-size-sm) !important;
  line-height: var(--ui-leading-snug) !important;
  font-weight: var(--ui-font-weight-medium) !important;
}

html body #MainCanvas .alert-success,
html body #MainCanvas [class$="-flash"].success,
html body #MainCanvas [class*="-flash "].success {
  border-color: var(--ui-success-soft-border) !important;
  background: var(--ui-success-soft) !important;
  color: var(--ui-success) !important;
}

html body #MainCanvas .alert-danger,
html body #MainCanvas .alert-error,
html body #MainCanvas [class$="-flash"].danger,
html body #MainCanvas [class*="-flash "].danger {
  border-color: var(--ui-danger-soft-border) !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
}

html body #MainCanvas .alert-warning {
  border-color: var(--ui-warning-soft-border) !important;
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}

html body #MainCanvas .alert-info {
  border-color: var(--ui-info-soft-border) !important;
  background: var(--ui-info-soft) !important;
  color: var(--ui-info) !important;
}

/* ----------------------------------------------------------------------
   Pagination / load-more controls
------------------------------------------------------------------------ */
html body #MainCanvas .pagination,
html body #MainCanvas .pager,
html body #MainCanvas [class$="-pagination"],
html body #MainCanvas [class*="-pagination "] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  margin: var(--ui-space-3) 0 !important;
  padding: 0 !important;
}

html body #MainCanvas .pagination > li,
html body #MainCanvas .pager > li {
  display: inline-flex !important;
  margin: 0 !important;
}

html body #MainCanvas .pagination > li > a,
html body #MainCanvas .pagination > li > span,
html body #MainCanvas .pager > li > a,
html body #MainCanvas .pager > li > span,
html body #MainCanvas [class*="-pagination"] a,
html body #MainCanvas [class*="-pagination"] button {
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  text-decoration: none !important;
}

html body #MainCanvas .pagination > .active > a,
html body #MainCanvas .pagination > .active > span,
html body #MainCanvas [class*="-pagination"] .active,
html body #MainCanvas [class*="-pagination"] [aria-current="page"] {
  border-color: var(--ui-accent-soft-border) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}

html body #MainCanvas [class$="-footer-tools"],
html body #MainCanvas [class*="-footer-tools "] {
  gap: var(--ui-space-2) !important;
  padding-top: var(--ui-space-3) !important;
}

html body #MainCanvas [class$="-loadmore-info"],
html body #MainCanvas [class*="-loadmore-info "] {
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-medium) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ----------------------------------------------------------------------
   Empty states — compact and calm
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-empty"],
html body #MainCanvas [class*="-empty "] {
  padding: var(--ui-space-7) var(--ui-space-5) !important;
  border: 1px dashed var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
  text-align: center !important;
}

html body #MainCanvas [class$="-empty-icon"],
html body #MainCanvas [class*="-empty-icon "] {
  margin-bottom: 8px !important;
  color: var(--ui-text-muted) !important;
  font-size: 24px !important;
  opacity: .80 !important;
}

html body #MainCanvas [class$="-empty-title"],
html body #MainCanvas [class*="-empty-title "] {
  margin-bottom: 5px !important;
  color: var(--ui-text-strong) !important;
  font-size: var(--ui-font-size-lg) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas [class$="-empty-text"],
html body #MainCanvas [class*="-empty-text "] {
  margin-bottom: 12px !important;
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-sm) !important;
  line-height: var(--ui-leading-normal) !important;
}

/* ----------------------------------------------------------------------
   Reusable dataset summary/charts — align old shared component to premium
------------------------------------------------------------------------ */
html body #MainCanvas .dataset-dashboard-summary,
html body #MainCanvas .dataset-charts-panel {
  border-color: var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}


/* Analytics follow operational lists: keep a clear visual hand-off from data to analysis. */
html body #MainCanvas .dataset-charts-panel {
  margin-top: var(--ui-space-6) !important;
}

html body #MainCanvas .dataset-summary-card,
html body #MainCanvas .dataset-chart-card {
  border-color: var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

html body #MainCanvas .dataset-dashboard-kicker {
  color: var(--ui-accent) !important;
  font-size: var(--ui-font-size-2xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .09em !important;
}

html body #MainCanvas .dataset-dashboard-title,
html body #MainCanvas .dataset-chart-header h3 {
  color: var(--ui-text-strong) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas .dataset-dashboard-subtitle,
html body #MainCanvas .dataset-summary-label,
html body #MainCanvas .dataset-summary-note,
html body #MainCanvas .dataset-chart-header p,
html body #MainCanvas .dataset-charts-summary-hint {
  color: var(--ui-text-muted) !important;
}

html body #MainCanvas .dataset-charts-summary {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-strong) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas .dataset-bar-track {
  background: var(--ui-border-subtle) !important;
}

/* Status tints inside data/summary cards become theme-aware. */
html body #MainCanvas .dataset-tone-positive .dataset-summary-icon {
  background: var(--ui-success-soft) !important;
  color: var(--ui-success) !important;
}
html body #MainCanvas .dataset-tone-negative .dataset-summary-icon {
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
}
html body #MainCanvas .dataset-tone-warning .dataset-summary-icon {
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}
html body #MainCanvas .dataset-tone-info .dataset-summary-icon {
  background: var(--ui-info-soft) !important;
  color: var(--ui-info) !important;
}

/* ----------------------------------------------------------------------
   Financial table states — theme-aware surface tint, keep colour semantics
------------------------------------------------------------------------ */
html body #MainCanvas td[data-financial-value].financial-positive,
html body #MainCanvas th[data-financial-value].financial-positive {
  background-color: var(--ui-success-soft) !important;
  border-color: var(--ui-success-soft-border) !important;
}

html body #MainCanvas td[data-financial-value].financial-negative,
html body #MainCanvas th[data-financial-value].financial-negative {
  background-color: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger-soft-border) !important;
}

html body #MainCanvas td[data-financial-value].financial-zero,
html body #MainCanvas th[data-financial-value].financial-zero {
  background-color: var(--ui-surface-soft) !important;
  border-color: var(--ui-border-subtle) !important;
}

/* ----------------------------------------------------------------------
   Responsive density
------------------------------------------------------------------------ */
@media (max-width: 767px) {
  html body #MainCanvas .table-card table thead th,
  html body #MainCanvas table[class$="-table"] thead th,
  html body #MainCanvas table[class*="-table "] thead th,
  html body #MainCanvas table.detail-table thead th {
    padding: 9px 11px !important;
  }

  html body #MainCanvas .table-card table tbody td,
  html body #MainCanvas .table-card table tfoot td,
  html body #MainCanvas table[class$="-table"] tbody td,
  html body #MainCanvas table[class$="-table"] tfoot td,
  html body #MainCanvas table[class*="-table "] tbody td,
  html body #MainCanvas table[class*="-table "] tfoot td,
  html body #MainCanvas table.detail-table tbody td,
  html body #MainCanvas table.detail-table tfoot td {
    padding: 10px 11px !important;
  }

  html body #MainCanvas [class$="-summary-row"],
  html body #MainCanvas [class*="-summary-row "] {
    align-items: flex-start !important;
  }
}

/* ----------------------------------------------------------------------
   Legacy unclassed data grids
   Target only the historical inline-light table signature used by old lists
   and AJAX list fragments. This avoids restyling structural/layout tables.
------------------------------------------------------------------------ */
html body #MainCanvas table:not([class])[style*="background-color"] {
  width: 100% !important;
  border: 1px solid var(--ui-border-subtle) !important;
  border-spacing: 0 !important;
  border-collapse: separate !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-xs) !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

html body #MainCanvas table:not([class])[style*="background-color"] th {
  padding: var(--ui-table-head-py) var(--ui-table-head-px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-data-head-bg) !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-table-head-size) !important;
  line-height: var(--ui-leading-snug) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

html body #MainCanvas table:not([class])[style*="background-color"] td {
  padding: var(--ui-table-cell-py) var(--ui-table-cell-px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-divider) !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  font-size: var(--ui-table-font-size) !important;
  line-height: var(--ui-leading-snug) !important;
  vertical-align: middle !important;
}

html body #MainCanvas table:not([class])[style*="background-color"] tr:nth-child(even) > td {
  background: var(--ui-data-row-even) !important;
}

html body #MainCanvas table:not([class])[style*="background-color"] tr:hover > td {
  background: var(--ui-data-row-hover) !important;
}

html body #MainCanvas table:not([class])[style*="background-color"] tr:last-child > td {
  border-bottom-color: transparent !important;
}

@media (max-width: 767px) {
  html body #MainCanvas table:not([class])[style*="background-color"] th {
    padding: 9px 11px !important;
  }
  html body #MainCanvas table:not([class])[style*="background-color"] td {
    padding: 10px 11px !important;
  }
}