:root {
  --table-row-height: 50px;
  --table-header-height: 50px;
  --table-group-header-row-height: 30px;
  --table-group-header-height: 60px;
  --table-cell-line-height: 18px;
  --table-cell-lines: 2;
  --table-cell-padding: 5px;
  --table-radius: 8px;
  --table-shadow:
    0 12px 28px rgb(29 36 48 / 8%),
    0 0 44px 12px rgb(255 255 255 / 58%);
  --table-empty-min-height: 150px;
  --table-body-font-size: 13px;
  --table-header-font-size: 13px;
  --table-body-font-weight: 400;
  --table-header-font-weight: 700;
  --table-summary-font-weight: 700;
  --table-font-family: var(--app-font-family);
  --table-border-color: #edf1f5;
  --table-outer-border-color: #d9e0ea;
  --table-header-bg: #f8fafc;
  --table-row-bg: #fdfdfc;
  --table-row-hover-bg: #fafcff;
  --table-row-selected-bg: #eaf5ff;
  --table-text-color: #4b5563;
  --table-header-text-color: #344054;
  --table-summary-bg: #f6faff;
  --table-summary-text-color: #1f2937;
  --table-empty-text-color: #98a2b3;
}

/* Canonical table component. Structural variants are assigned by renderTable(). */
.unified-table-shell {
  color: var(--table-text-color);
  background: var(--table-row-bg);
  font-family: var(--table-font-family);
}

.table-scroll-shell.unified-table-shell {
  border: 1px solid var(--table-outer-border-color);
  border-radius: var(--table-radius);
  background: var(--table-row-bg);
  box-shadow: var(--table-shadow);
}

.unified-data-table,
.unified-data-table table {
  color: var(--table-text-color);
  background: var(--table-row-bg);
  font-family: var(--table-font-family);
  font-size: var(--table-body-font-size);
  font-weight: var(--table-body-font-weight);
}

.unified-data-table {
  height: auto;
  min-height: 0;
}

.unified-table-shell > .unified-data-table.table-split-frame {
  height: 100%;
}

.unified-data-table table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.unified-data-table th,
.unified-data-table td {
  box-sizing: border-box;
  padding: var(--table-cell-padding);
  border: 0;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  color: var(--table-text-color);
  background: var(--table-row-bg);
  font-family: var(--table-font-family);
  font-size: var(--table-body-font-size);
  line-height: var(--table-cell-line-height);
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.unified-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 var(--table-cell-padding);
  color: var(--table-header-text-color);
  background: var(--table-header-bg);
  font-size: var(--table-header-font-size);
  font-weight: var(--table-header-font-weight);
}

.unified-data-table th:has(.th-content) {
  padding: 0;
}

.unified-data-table tbody tr,
.unified-data-table tbody td:not([rowspan]) {
  height: var(--table-row-height);
  min-height: var(--table-row-height);
  max-height: var(--table-row-height);
}

.unified-data-table.is-variable-row tbody tr,
.unified-data-table.is-variable-row tbody td:not([rowspan]) {
  height: auto;
  min-height: 0;
  max-height: none;
}

.unified-data-table .th-content {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: var(--table-cell-padding);
  overflow: hidden;
  line-height: var(--table-cell-line-height);
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.unified-data-table :is(th, td):is(.col-__index, .col-index, .col-row_index, [data-column="__index"], [data-column="index"], [data-column="row_index"]),
.unified-data-table :is(th, td)[data-column="__key"] {
  text-align: center;
}

.unified-data-table :is(th, td):is(.col-__index, .col-index, .col-row_index, [data-column="__index"], [data-column="index"], [data-column="row_index"]) .th-content,
.unified-data-table :is(th, td)[data-column="__key"] :is(.th-content, .table-cell-content) {
  padding: 0;
  justify-items: center;
  text-align: center;
}

.unified-data-table .table-cell-content {
  width: 100%;
  min-width: 0;
  max-height: calc(var(--table-cell-line-height) * var(--table-cell-lines));
  overflow: hidden;
  line-height: var(--table-cell-line-height);
  overflow-wrap: anywhere;
}

.unified-data-table.is-single-header thead tr {
  height: var(--table-header-height);
  min-height: var(--table-header-height);
  max-height: var(--table-header-height);
}

.unified-data-table.is-single-header thead th,
.unified-data-table.is-single-header thead .th-content {
  height: calc(var(--table-header-height) - 1px);
  min-height: calc(var(--table-header-height) - 1px);
  max-height: calc(var(--table-header-height) - 1px);
}

.unified-data-table.is-grouped-header .table-grouped-head tr {
  height: var(--table-group-header-row-height);
  min-height: var(--table-group-header-row-height);
  max-height: var(--table-group-header-row-height);
}

.unified-data-table.is-grouped-header .table-grouped-head th:not([rowspan="2"]),
.unified-data-table.is-grouped-header .table-grouped-head th:not([rowspan="2"]) .th-content {
  height: calc(var(--table-group-header-row-height) - 1px);
  min-height: calc(var(--table-group-header-row-height) - 1px);
  max-height: calc(var(--table-group-header-row-height) - 1px);
}

.unified-data-table.is-grouped-header .table-grouped-head th[rowspan="2"],
.unified-data-table.is-grouped-header .table-grouped-head th[rowspan="2"] .th-content {
  height: calc(var(--table-group-header-height) - 1px);
  min-height: calc(var(--table-group-header-height) - 1px);
  max-height: calc(var(--table-group-header-height) - 1px);
}

.unified-data-table.is-grouped-header .table-group-header .th-content {
  justify-content: center;
  text-align: center;
}

.unified-data-table tbody tr:not(.placeholder-row):not(.unified-table-empty-row):hover > td {
  background: var(--table-row-hover-bg);
}

.unified-data-table tbody tr:is(.selected, .is-selected, .active, [aria-selected="true"]) > td,
.unified-data-table tbody tr:has(> td:is([data-column="__key"], [data-column="select"]) input[type="checkbox"]:checked) > td {
  background: var(--table-row-selected-bg);
}

.unified-data-table tbody tr.placeholder-row td {
  color: transparent;
}

.unified-data-table tbody tr.placeholder-row td:is([data-column="__index"], [data-column="index"], [data-column="row_index"]) {
  color: var(--table-empty-text-color);
}

.unified-data-table .unified-table-empty-row td {
  padding: 0;
  color: var(--table-empty-text-color);
  background: var(--table-row-bg);
  text-align: center;
}

.unified-data-table .unified-table-empty-state {
  min-height: var(--table-empty-min-height);
  display: grid;
  place-items: center;
  padding: 24px;
  font-size: var(--table-body-font-size);
  line-height: var(--table-cell-line-height);
}

.unified-data-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 auto;
  display: block;
  accent-color: var(--ui-primary);
}

.unified-data-table.has-summary :is(tfoot td, .table-fixed-footer td) {
  height: var(--table-row-height);
  min-height: var(--table-row-height);
  max-height: var(--table-row-height);
  color: var(--table-summary-text-color);
  background: var(--table-summary-bg);
  border-color: var(--table-border-color);
  box-shadow: none;
  font-weight: var(--table-summary-font-weight);
}

.unified-data-table button {
  font-family: var(--table-font-family);
  font-size: var(--table-body-font-size);
}

/* Every table thumbnail uses one full-image presentation rule. */
.unified-data-table td:has(.table-image-thumb) {
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}

.unified-data-table .table-cell-content:has(.table-image-thumb) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  max-height: 50px;
  overflow: visible;
  line-height: 0;
}

.unified-data-table .product-info-cell:has(.table-image-thumb) {
  height: 50px;
}

.unified-data-table .table-image-thumb {
  display: block;
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  object-fit: contain;
  object-position: center;
  border: 1px solid #d5e3f0;
  border-radius: 3px;
  background: #f8fafc;
  cursor: zoom-in;
}

.unified-data-table .table-image-thumb-control {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  cursor: zoom-in;
}

/* Shared typography for workspace controls. Keep the top navigation independent. */
.workspace .filters,
.workspace .filter-bar,
.workspace .report-toolbar,
.workspace .filter-control,
.workspace .multi-filter-panel,
.workspace .single-filter-panel,
.multi-filter-panel,
.multi-filter-option,
.single-filter-panel,
.single-filter-option {
  font-family: var(--table-font-family) !important;
  font-size: 13px !important;
}

.workspace .filters :is(button, input, select, textarea, option),
.workspace .filter-bar :is(button, input, select, textarea, option),
.workspace .report-toolbar :is(button, input, select, textarea, option),
.workspace .filter-control :is(button, input, select, textarea, option),
.workspace .pager :is(button, input, select, textarea, option),
.workspace .multi-filter-panel *,
.workspace .single-filter-panel * {
  font-family: var(--table-font-family) !important;
  font-size: 13px !important;
}

/* Fixed-height controls align their labels by the content box, not an oversized line-height. */
.workspace .filters button:not(.single-filter-option),
.workspace .filter-bar button:not(.single-filter-option),
.workspace .report-toolbar button:not(.single-filter-option),
.workspace .filter-control button:not(.single-filter-option),
.workspace .pager button:not(.single-filter-option) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  vertical-align: middle;
}

/* Date and option selectors are fields, not command buttons. */
.workspace :is(.filters, .filter-bar, .report-toolbar, .filter-control)
button:is(.date-range-btn, .multi-filter-btn, .unified-select-btn) {
  justify-content: flex-start;
  text-align: left;
}

/* Dropdown spacing is owned by the shared filter components in styles.css. */
.workspace .multi-filter-panel,
.workspace .single-filter-panel {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.workspace .multi-filter-panel .multi-filter-option *,
.workspace .single-filter-panel .single-filter-option * {
  font-size: 13px !important;
}

.workspace .filters :is(input:not([type="checkbox"]):not([type="radio"]), select),
.workspace .filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select),
.workspace .report-toolbar :is(input:not([type="checkbox"]):not([type="radio"]), select),
.workspace .filter-control :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  line-height: normal !important;
}

/* Pager buttons and both summary areas share one compact text size. */
.workspace .pager,
.workspace .pager *,
.workspace .standard-list-pager,
.workspace .standard-list-pager * {
  font-family: var(--table-font-family) !important;
  font-size: 13px !important;
}