/* Growthmerce data tables — composition overlay. CSS only. */

:root {
  --gm-tbl-pad-y: 18px;
  --gm-tbl-pad-x: 16px;
  --gm-tbl-head-h: 48px;
  --gm-tbl-row-min: 88px;
  --gm-tbl-row-gap: 8px;
  --gm-tbl-gap-bg: color-mix(in srgb, hsl(var(--background)) 78%, #000 22%);
  --gm-tbl-line: hsl(var(--border) / 0.7);
  --gm-tbl-head-bg: hsl(var(--muted) / 0.88);
  --gm-tbl-row-bg: hsl(var(--card));
  --gm-tbl-hover: color-mix(in srgb, hsl(var(--primary)) 6%, hsl(var(--card)));
  --gm-tbl-selected: color-mix(in srgb, hsl(var(--primary)) 10%, hsl(var(--card)));
}

html.dark {
  --gm-tbl-line: hsl(var(--border) / 0.62);
  --gm-tbl-gap-bg: #070d18;
  --gm-tbl-head-bg: color-mix(in srgb, hsl(var(--muted)) 82%, hsl(var(--card)));
  --gm-tbl-row-bg: hsl(var(--card));
}

/* -------------------------------------------------------------------------- */
/* Shared data-table rhythm (explicit shells only — never date-picker tables) */
/* -------------------------------------------------------------------------- */

.gm-ord-ops table,
.shipping-analytics-page table,
[data-layout="fit-product-performance"] table,
table[class*="min-w-["],
.gm-df-table,
.gm-wa-ops table {
  border-collapse: separate;
  border-spacing: 0;
}

.gm-ord-ops table thead th,
.shipping-analytics-page table thead th,
[data-layout="fit-product-performance"] table thead th,
table[class*="min-w-["] thead th,
.gm-df-table th,
.gm-wa-ops table thead th {
  height: var(--gm-tbl-head-h);
  padding: 10px var(--gm-tbl-pad-x) !important;
  vertical-align: middle;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: hsl(var(--muted-foreground)) !important;
  white-space: nowrap;
  background: var(--gm-tbl-head-bg);
  border-bottom: 1px solid var(--gm-tbl-line);
  box-sizing: border-box;
}

.gm-ord-ops table tbody td,
.shipping-analytics-page table tbody td,
[data-layout="fit-product-performance"] table tbody td,
table[class*="min-w-["] tbody td,
.gm-df-table td,
.gm-wa-ops table tbody td {
  height: var(--gm-tbl-row-min);
  padding: var(--gm-tbl-pad-y) var(--gm-tbl-pad-x) !important;
  vertical-align: middle;
  line-height: 1.5;
  box-sizing: border-box;
  border-bottom: 1px solid var(--gm-tbl-line);
}

.gm-ord-ops table tbody tr,
[data-layout="fit-product-performance"] table tbody tr,
table[class*="min-w-["] tbody tr {
  background-color: var(--gm-tbl-row-bg);
}

.gm-ord-ops table tbody tr:last-child td,
[data-layout="fit-product-performance"] table tbody tr:last-child td,
.gm-df-table tr:last-child td,
table[class*="min-w-["] tbody tr:last-child td {
  border-bottom-color: transparent;
}

.gm-ord-ops table tbody tr:hover td,
[data-layout="fit-product-performance"] table tbody tr:hover td,
table[class*="min-w-["] tbody tr:hover td {
  background-color: var(--gm-tbl-hover);
}

/* -------------------------------------------------------------------------- */
/* Orders ops table                                                            */
/* -------------------------------------------------------------------------- */

.orders-desktop-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.orders-desktop-scroll table {
  table-layout: auto !important;
  width: 100% !important;
  min-width: 1280px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
}

.orders-desktop-scroll table thead th,
.orders-desktop-scroll table tbody td {
  width: auto !important;
  min-width: 0;
  box-sizing: border-box;
  vertical-align: middle !important;
}

.orders-desktop-scroll table thead th {
  height: var(--gm-tbl-head-h);
  padding: 10px var(--gm-tbl-pad-x) !important;
  background: var(--gm-tbl-head-bg) !important;
  backdrop-filter: blur(12px);
  box-shadow: none !important;
}

.orders-desktop-scroll table tbody td {
  height: var(--gm-tbl-row-min);
  padding: var(--gm-tbl-pad-y) var(--gm-tbl-pad-x) !important;
  background-color: var(--gm-tbl-row-bg);
  background-clip: padding-box;
  border-bottom: var(--gm-tbl-row-gap) solid var(--gm-tbl-gap-bg) !important;
}

.orders-desktop-scroll table tbody td > p + p,
.orders-desktop-scroll table tbody td > span + span,
.orders-desktop-scroll table tbody td > p + span,
.orders-desktop-scroll table tbody td .mt-1,
.orders-desktop-scroll table tbody td .mt-1\.5 {
  margin-top: 6px !important;
}

.orders-desktop-scroll table tbody td.gm-col-fill > span {
  display: block;
}

.orders-desktop-scroll table tbody td.gm-col-fill > span + span {
  margin-top: 5px;
  line-height: 1.4;
}

.orders-desktop-scroll table .gm-col-hug {
  width: 1% !important;
  white-space: nowrap;
  padding-inline: var(--gm-tbl-pad-x) !important;
  padding-block: var(--gm-tbl-pad-y) !important;
}

.orders-desktop-scroll table .gm-col-fill,
.orders-desktop-scroll table thead th[class*="max-w-[148px]"],
.orders-desktop-scroll table tbody td[class*="max-w-[148px]"] {
  width: auto !important;
  min-width: 176px !important;
  max-width: none !important;
  white-space: normal;
}

.orders-desktop-scroll table tbody td.gm-col-fill {
  line-height: 1.45;
}

.orders-desktop-scroll table tbody td.gm-col-fill .truncate,
.orders-desktop-scroll table tbody td p.truncate {
  max-width: 220px !important;
}

.orders-desktop-scroll table tbody td [class*="text-[10px]"],
.orders-desktop-scroll table tbody td [class*="text-[11px]"] {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.orders-desktop-scroll table thead th:first-child,
.orders-desktop-scroll table tbody td:first-child {
  padding-inline-start: 16px !important;
}

.orders-desktop-scroll table thead th:last-child,
.orders-desktop-scroll table tbody td:last-child {
  width: 164px !important;
  min-width: 164px !important;
  padding-inline: 10px !important;
}

.orders-desktop-scroll [class*="w-[96px]"],
.orders-desktop-scroll [class*="w-[112px]"],
.orders-desktop-scroll [class*="min-w-[148px]"],
.orders-desktop-scroll [class*="w-[160px]"],
.orders-desktop-scroll [class*="w-[132px]"] {
  width: auto !important;
  min-width: 0 !important;
}

[data-gm="bosta-rate"] {
  min-width: 108px !important;
  max-width: 148px !important;
  padding: 8px 10px !important;
  box-sizing: border-box;
}

.orders-desktop-scroll table [role="combobox"],
.orders-desktop-scroll table select {
  min-width: 112px !important;
  min-height: 32px;
}

.orders-desktop-scroll table tbody tr:hover td {
  background-color: var(--gm-tbl-hover) !important;
}

.orders-desktop-scroll table tbody tr[class*="[0.07]"] td {
  background-color: var(--gm-tbl-selected) !important;
}

.orders-desktop-scroll table thead th[class*="sticky"],
.orders-desktop-scroll table tbody td[class*="sticky"] {
  box-shadow: none !important;
  backdrop-filter: none;
  border-inline-start: 1px solid var(--gm-tbl-line) !important;
}

.orders-desktop-scroll table thead th[class*="sticky"] {
  background: var(--gm-tbl-head-bg) !important;
}

.orders-desktop-scroll table tbody td[class*="sticky"] {
  background-color: var(--gm-tbl-row-bg) !important;
  background-clip: padding-box;
}

.orders-desktop-scroll table tbody tr:hover td[class*="sticky"] {
  background-color: var(--gm-tbl-hover) !important;
}

.orders-desktop-scroll table tbody tr[class*="[0.07]"] td[class*="sticky"] {
  background-color: var(--gm-tbl-selected) !important;
}

.orders-desktop-scroll table tbody td[class*="sticky"] > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.orders-desktop-scroll table tbody td[class*="sticky"] a,
.orders-desktop-scroll table tbody td[class*="sticky"] button {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Product performance / shipping analytics                                    */
/* -------------------------------------------------------------------------- */

[data-layout="fit-product-performance"] {
  overflow-x: auto !important;
  border-radius: 1rem !important;
}

[data-layout="fit-product-performance"] table {
  table-layout: auto !important;
  width: 100% !important;
  min-width: 1080px;
  font-size: 12.5px !important;
}

[data-layout="fit-product-performance"] thead th:first-child,
[data-layout="fit-product-performance"] tbody td:first-child,
[data-layout="fit-product-performance"] .gm-col-fill {
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px;
  white-space: normal;
}

[data-layout="fit-product-performance"] thead th:not(:first-child),
[data-layout="fit-product-performance"] tbody td:not(:first-child),
[data-layout="fit-product-performance"] .gm-col-hug {
  width: 1% !important;
  white-space: nowrap !important;
  padding-inline: var(--gm-tbl-pad-x) !important;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .gm-ord-ops .orders-desktop-scroll table {
    min-width: 1080px;
  }
}