/*
 * ADS Apple table system
 *
 * This final cascade layer normalizes every operational table after the
 * historical page-specific themes. Names and action columns keep the room
 * they need; repeated metric columns share one compact visual rhythm.
 */

:root {
  --apple-table-header-height: 36px;
  --apple-table-row-height: 38px;
  --apple-table-header-bg: rgba(255, 255, 255, .94);
  --apple-table-header-ink: #3a3a3c;
  --apple-table-ink: #1d1d1f;
  --apple-table-subtle: #6e6e73;
  --apple-table-line: rgba(60, 60, 67, .12);
  --apple-table-soft-line: rgba(60, 60, 67, .065);
  --apple-table-column-line: rgba(60, 60, 67, .055);
  --apple-table-hover: rgba(0, 122, 255, .035);
  --apple-table-selected: rgba(0, 122, 255, .075);
  --apple-table-active: #007aff;
  --apple-table-focus: rgba(0, 122, 255, .24);
  --apple-table-key-bg: rgba(0, 122, 255, .12);
  --apple-table-key-line: rgba(0, 122, 255, .34);
  --apple-table-key-ink: #075fbd;
  --apple-table-ease-out: cubic-bezier(.23, 1, .32, 1);
}

:where(.table-wrap, .fixed-table-scroll, .upload-history-table, .user-account-list) {
  background: #fff;
  scrollbar-color: rgba(60, 60, 67, .34) transparent;
  scrollbar-width: thin;
}

:where(.table-wrap, .fixed-table-scroll, .upload-history-table, .user-account-list)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:where(.table-wrap, .fixed-table-scroll, .upload-history-table, .user-account-list)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(60, 60, 67, .28);
  background-clip: padding-box;
}

table {
  color: var(--apple-table-ink) !important;
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

thead th {
  box-sizing: border-box;
  height: var(--apple-table-header-height) !important;
  min-height: var(--apple-table-header-height) !important;
  padding: 0 10px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--apple-table-line) !important;
  background: var(--apple-table-header-bg) !important;
  color: var(--apple-table-header-ink) !important;
  font-size: 11px !important;
  font-weight: 640 !important;
  line-height: 1.15 !important;
  letter-spacing: .006em !important;
  vertical-align: middle !important;
}

thead th + th {
  box-shadow: inset 1px 0 0 rgba(60, 60, 67, .055);
}

.fixed-table-scroll thead th {
  top: 0;
  z-index: 5;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

tbody td {
  box-sizing: border-box;
  height: var(--apple-table-row-height) !important;
  min-height: var(--apple-table-row-height) !important;
  padding: 5px 10px !important;
  border-top: 1px solid var(--apple-table-soft-line) !important;
  color: var(--apple-table-ink) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
}

table :where(th.number, td.number) {
  text-align: right;
}

thead th.is-sortable-header,
thead th:has(.sort-header) {
  padding-inline: 4px !important;
}

.sort-header {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px !important;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--apple-table-header-ink) !important;
  font: inherit;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .006em !important;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, transform 100ms var(--apple-table-ease-out);
}

.sort-header.number {
  justify-content: flex-end;
}

.sort-header span {
  min-width: 0;
  color: inherit !important;
  font: inherit;
  white-space: nowrap;
}

.sort-header .apple-sort-symbol {
  width: 14px;
  height: 18px;
  flex: 0 0 14px;
  display: block;
  overflow: visible;
  border-radius: 0;
  background: rgba(118, 118, 128, .09);
  color: currentColor !important;
  transition: color 120ms ease, opacity 120ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1);
  opacity: .42 !important;
}

.sort-header.active,
th[aria-sort="ascending"] .sort-header,
th[aria-sort="descending"] .sort-header {
  background: transparent;
  color: var(--apple-table-header-ink) !important;
}

.sort-header.active .apple-sort-symbol,
th[aria-sort="ascending"] .sort-header .apple-sort-symbol,
th[aria-sort="descending"] .sort-header .apple-sort-symbol {
  background: transparent;
  color: var(--apple-table-active) !important;
  opacity: 1 !important;
}

.sort-header.active span,
th[aria-sort="ascending"] .sort-header span,
th[aria-sort="descending"] .sort-header span {
  font-weight: 680 !important;
}

.sort-header:active {
  transform: scale(.985);
}

.sort-header:focus-visible {
  outline: 3px solid var(--apple-table-focus);
  outline-offset: -1px;
}

.ad-data-latest-table th,
.ad-data-latest-table th .sort-header,
.ad-data-latest-table th .sort-header span,
.ad-data-latest-table th .sort-header .apple-sort-symbol,
.ad-data-latest-table .ad-data-header-cell.static > span:first-child,
.ad-data-report-table th.ad-data-accent-header .ad-data-header-cell.static > span:first-child {
  font-size: 11px !important;
  font-weight: 650 !important;
}

.ad-data-latest-table .sort-header,
.ad-data-latest-table .ad-data-header-cell {
  min-height: 28px;
}

.ad-data-latest-table .sort-header.number,
.ad-data-latest-table .number,
.ad-data-detail-table .number {
  justify-content: center;
  text-align: center !important;
}

.ad-data-latest-table th[data-ad-column-key="campaignName"] .sort-header {
  justify-content: flex-start;
}

.ad-data-resizable-table col[data-ad-column-col="liveSwitch"],
.ad-data-resizable-table th[data-ad-column-key="liveSwitch"],
.ad-data-resizable-table td.facebook-switch-cell {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}

.ad-data-latest-table th.is-static-header,
.ad-data-latest-table th.is-selection-header {
  color: var(--apple-table-subtle) !important;
}

/* A historical data sheet is for reading, not for changing the data order. */
.ad-data-report-table th.is-record-header {
  border-bottom-color: var(--apple-table-line) !important;
  background: var(--apple-table-header-bg) !important;
  box-shadow: none !important;
  color: var(--apple-table-header-ink) !important;
  cursor: default;
}

.ad-data-report-table th.is-record-header .ad-data-header-cell.static > span:first-child {
  color: inherit !important;
}

.ad-data-header-label-stack {
  height: 30px;
}

.ad-data-header-label-stack > span {
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 12px;
}

.ad-data-header-label-stack > small {
  font-size: 8px !important;
  font-weight: 550 !important;
  line-height: 9px;
}

th[data-ad-column-key] {
  position: relative;
}

.ad-column-resizer {
  right: -4px;
  width: 9px;
}

.ad-column-resizer::after {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 1px;
  border-radius: 999px;
  background: var(--apple-table-active);
  content: "";
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms var(--apple-table-ease-out);
}

.ad-column-resizer:hover::after,
body.ad-column-resizing .ad-column-resizer::after {
  opacity: 1;
  transform: scaleX(2);
}

body.ad-column-resizing th[data-ad-column-key] {
  background: rgba(0, 122, 255, .06) !important;
}

.orders-report-summary-row td,
.sales-report-table .orders-report-summary-row td,
.ad-data-report-load-more-row td,
.ad-data-manual-add-row td {
  height: auto !important;
  min-height: var(--apple-table-row-height) !important;
}

.user-account-head,
.workbench-store-header {
  box-sizing: border-box;
  min-height: var(--apple-table-header-height) !important;
  border-bottom: 1px solid var(--apple-table-line) !important;
  background: var(--apple-table-header-bg) !important;
  color: var(--apple-table-header-ink) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .006em !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.shopify-directory-panel .workbench-store-header {
  height: var(--apple-table-header-height) !important;
  min-height: var(--apple-table-header-height) !important;
  padding: 0 18px !important;
  border-top: 1px solid rgba(60, 60, 67, .055) !important;
  border-bottom: 1px solid var(--apple-table-line) !important;
  background: var(--apple-table-header-bg) !important;
}

.workbench-store-header > .sort-header {
  justify-content: flex-start;
  padding-inline: 0 6px !important;
}

.workbench-store-header .store-card-meta > .sort-header {
  justify-content: center;
  padding-inline: 4px !important;
}

.workbench-store-header .sort-header span {
  overflow: hidden;
  text-overflow: ellipsis;
}

thead th.is-static-header,
thead th.is-selection-header {
  color: var(--apple-table-subtle) !important;
  cursor: default;
}

:where(.table-wrap, .fixed-table-scroll, .upload-history-table) .button,
:where(.table-wrap, .fixed-table-scroll, .upload-history-table) button:not(.sort-header):not(.facebook-switch) {
  transition: transform 100ms var(--apple-table-ease-out);
}

:where(.table-wrap, .fixed-table-scroll, .upload-history-table) .button:active:not(:disabled),
:where(.table-wrap, .fixed-table-scroll, .upload-history-table) button:active:not(:disabled):not(.sort-header):not(.facebook-switch) {
  transform: scale(.97);
}

tr.is-selected > td,
.ad-data-latest-table tr.is-selected > td {
  background: var(--apple-table-selected) !important;
}

tbody tr {
  transition: none !important;
}

/*
 * Global authority layer
 *
 * The legacy bundle contains page-specific table skins with more specific
 * selectors (and, in a few places, !important).  Scope the shared component
 * to the application roots so every real table resolves to the same header
 * material instead of exposing those historical one-off skins.
 */
#app-shell #view table thead th,
#modal-root table thead th {
  box-sizing: border-box !important;
  height: var(--apple-table-header-height) !important;
  min-height: var(--apple-table-header-height) !important;
  padding: 0 10px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--apple-table-line) !important;
  border-left: 0 !important;
  background: var(--apple-table-header-bg) !important;
  color: var(--apple-table-header-ink) !important;
  font-size: 11px !important;
  font-weight: 640 !important;
  line-height: 1.15 !important;
  letter-spacing: .006em !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

#app-shell #view table thead th.is-sortable-header,
#app-shell #view table thead th:has(.sort-header),
#modal-root table thead th.is-sortable-header,
#modal-root table thead th:has(.sort-header) {
  padding-inline: 4px !important;
}

#app-shell #view table thead th + th,
#modal-root table thead th + th {
  border-left: 1px solid var(--apple-table-column-line) !important;
  box-shadow: none !important;
}

/*
 * Important report metrics keep a restrained Apple system-blue material.
 * The tint establishes hierarchy without turning a read-only history sheet
 * into a row of primary buttons. Group edges fade instead of forming a rigid
 * spreadsheet-style box.
 */
#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header {
  background: var(--apple-table-key-bg) !important;
  color: var(--apple-table-key-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
}

#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--apple-table-key-line);
  content: "";
  pointer-events: none;
}

#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header .ad-data-header-cell.static > span:first-child,
#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header .ad-data-header-label-stack > small {
  color: inherit !important;
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportBudgetValue"],
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportCpmValue"] {
  border-left-color: transparent !important;
  border-radius: 7px 0 0 7px;
  background: linear-gradient(90deg, rgba(0, 122, 255, .055), var(--apple-table-key-bg) 16px) !important;
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportConversionCostValue"],
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportFrequencyValue"] {
  border-radius: 0 7px 7px 0;
  background: linear-gradient(90deg, var(--apple-table-key-bg) calc(100% - 16px), rgba(0, 122, 255, .055)) !important;
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportBudgetValue"]::after,
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportCpmValue"]::after {
  background: linear-gradient(90deg, transparent, var(--apple-table-key-line) 16px);
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportConversionCostValue"]::after,
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportFrequencyValue"]::after {
  background: linear-gradient(90deg, var(--apple-table-key-line) calc(100% - 16px), transparent);
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportConversionCostValue"] + th,
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportFrequencyValue"] + th {
  border-left-color: transparent !important;
}

/*
 * Dense macOS data tables use hairline column dividers: they keep numbers
 * aligned without turning the surface into a heavy spreadsheet grid.
 */
#app-shell #view table tbody td,
#modal-root table tbody td {
  border-top: 1px solid var(--apple-table-soft-line) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

#app-shell #view table tbody td + td,
#modal-root table tbody td + td {
  border-left: 1px solid var(--apple-table-column-line) !important;
}

/* Empty record-sheet rows remain useful as a height guide, but not a grid. */
#app-shell #view .ad-data-report-virtual-table tbody td {
  border-top-color: rgba(60, 60, 67, .035) !important;
}

/* Table-like lists use the exact same header material and vertical rhythm. */
#app-shell #view .user-account-head,
#app-shell #view .workbench-store-header {
  box-sizing: border-box !important;
  height: var(--apple-table-header-height) !important;
  min-height: var(--apple-table-header-height) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--apple-table-line) !important;
  background: var(--apple-table-header-bg) !important;
  color: var(--apple-table-header-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

#app-shell #view .shopify-directory-panel .workbench-store-list {
  border-top: 0 !important;
}

#app-shell #view .shopify-directory-panel .workbench-store-header,
#app-shell #view .shopify-directory-panel .workbench-store-card {
  grid-template-columns: minmax(120px, 1fr) minmax(300px, .82fr) !important;
  gap: 12px !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
}

#app-shell #view .shopify-directory-panel .workbench-store-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#app-shell #view .shopify-directory-panel .workbench-store-header.without-actions,
#app-shell #view .shopify-directory-panel .workbench-store-card.without-actions {
  grid-template-columns: minmax(120px, 1fr) minmax(210px, .6fr) !important;
}

#app-shell #view .shopify-directory-panel .store-card-meta {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: center !important;
}

#app-shell #view .workbench-store-header .store-card-meta {
  height: 30px !important;
  min-height: 30px !important;
}

#app-shell #view .shopify-directory-panel .store-card-meta.with-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#app-shell #view .shopify-directory-panel .workbench-store-header .store-card-meta > .sort-header {
  justify-content: flex-start !important;
  padding-inline: 0 !important;
  text-align: left !important;
}

@media (hover: hover) and (pointer: fine) {
  /*
   * Keep the dense advertising overview hover visually unchanged while
   * painting one row background instead of animating every cell separately.
   */
  .ad-data-latest-table tbody tr:not(.has-row-highlight):not(.is-selected):hover {
    background: var(--apple-table-selected) !important;
    transition: none !important;
  }

  .ad-data-latest-table tbody tr:not(.has-row-highlight):not(.is-selected):hover > td {
    background: transparent !important;
    transition: none !important;
  }

  tbody tr:not(.has-row-highlight):not(.is-selected):hover > td {
    background: var(--apple-table-hover) !important;
  }

  .sort-header:hover {
    background: rgba(60, 60, 67, .065);
    color: var(--apple-table-ink) !important;
  }

  .sort-header.active:hover,
  th[aria-sort="ascending"] .sort-header:hover,
  th[aria-sort="descending"] .sort-header:hover {
    background: rgba(60, 60, 67, .065);
    color: var(--apple-table-header-ink) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sort-header,
  .ad-column-resizer::after,
  :where(.table-wrap, .fixed-table-scroll, .upload-history-table) button {
    transition-duration: 0ms !important;
  }

  .sort-header:active,
  :where(.table-wrap, .fixed-table-scroll, .upload-history-table) button:active {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .fixed-table-scroll thead th,
  thead th,
  .user-account-head,
  .workbench-store-header {
    background: #f8f8fa !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  thead th {
    border-bottom-color: #6e6e73 !important;
    background: #fff !important;
    color: #1d1d1f !important;
  }

  tbody td {
    border-top-color: rgba(29, 29, 31, .42) !important;
  }

  #app-shell #view table tbody td + td,
  #modal-root table tbody td + td,
  #app-shell #view table thead th + th,
  #modal-root table thead th + th {
    border-left-color: rgba(29, 29, 31, .32) !important;
  }

  #app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header {
    background: rgba(0, 122, 255, .12) !important;
    color: #004f9e !important;
  }
}

@media (max-width: 760px) {
  :root {
    --apple-table-header-height: 38px;
    --apple-table-row-height: 40px;
  }

  thead th,
  tbody td {
    padding-inline: 9px !important;
  }

  #app-shell #view .shopify-directory-panel .workbench-store-header {
    grid-template-columns: minmax(92px, 1fr) minmax(260px, 2fr) !important;
    gap: 8px !important;
    padding-inline: 12px !important;
  }

  #app-shell #view .shopify-directory-panel .workbench-store-header.without-actions {
    grid-template-columns: minmax(92px, 1fr) minmax(190px, 1.35fr) !important;
  }

  #app-shell #view .workbench-store-header .store-card-meta.with-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #app-shell #view .shopify-directory-panel .workbench-store-header {
    display: none !important;
  }
}