/* Shared density and neutral actions for data tables, including tables populated after page load.
   Headerless summaries opt in with wf-data-table. Presentation tables and QR
   code layout tables are not data tables. Important declarations in this layer
   keep controls consistent with older page styles while preserving table cell colors,
   borders, sticky columns, and cell wrapping. */
@layer wf-table-density {
  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding: 4px 7px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) > :is(thead, tbody, tfoot) > tr > th:not([scope="row"]) {
    font-size: 11px !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    vertical-align: top !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(button, [role="button"], .button, .btn, a[class*="-btn"], input[type="button"], input[type="submit"]):not([role="switch"], .analytics-date-link, .analytics-inline-filter-btn) {
    min-height: 24px !important;
    height: auto !important;
    padding: 2px 5px !important;
    margin-block: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border: 1px solid #cad5e8 !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
    color: var(--ink, #101010) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transform: none !important;
    animation: none !important;
  }

  /* Row actions use the same gray treatment as header controls in every state. */
  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(button, [role="button"], .button, .btn, a[class*="-btn"], input[type="button"], input[type="submit"]):not([role="switch"], .analytics-date-link, .analytics-inline-filter-btn, :disabled, [aria-disabled="true"]):is(:hover, :focus-visible, :active) {
    background: #eaf1fb !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(button, [role="button"], .button, .btn, a[class*="-btn"], input[type="button"], input[type="submit"]):not([role="switch"], .analytics-date-link, .analytics-inline-filter-btn):focus-visible {
    outline: 2px solid #355173 !important;
    outline-offset: 2px !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(.analytics-date-link, .analytics-inline-filter-btn) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select, textarea) {
    min-height: 28px !important;
    padding: 4px 6px !important;
    margin-block: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) select {
    padding-right: 26px !important;
    background-position: right 6px center !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select) {
    height: auto !important;
  }

  :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(th, td) > :is(p, label) {
    margin-block: 0 !important;
  }

  /* Reserve the top-right corner for dragging; other utilities stay below the label. */
  table th:has(.analytics-column-controls .column-drag-handle) {
    position: relative;
    height: 32px !important;
    padding-right: 34px !important;
  }

  table th .analytics-column-controls {
    display: flex !important;
    position: static !important;
    gap: 3px !important;
    margin: 3px 0 0 !important;
    line-height: 1.2 !important;
  }

  table th :is(.refund-header-wrap, .cancel-header-wrap) {
    display: flex !important;
  }

  table th .analytics-traffic-funnel-source-header {
    display: block !important;
  }

  table th .analytics-column-summary {
    margin: 3px 0 0 !important;
    line-height: 1.3 !important;
  }

  table th .column-hide-btn {
    display: none !important;
  }

  table th .column-drag-handle {
    position: absolute !important;
    top: 4px !important;
    right: 7px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 4px !important;
  }

  table th .analytics-column-controls:not(:has(> :not(.column-drag-handle, .column-hide-btn))) {
    margin: 0 !important;
  }

  #dashboardContent.analytics-table-scope #filters-bar {
    gap: 6px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  #filters-bar :is(.analytics-column-toolbar, .analytics-chart-toolbar) {
    align-self: center !important;
  }

  #dashboardContent.analytics-table-scope #filters-bar :is(.analytics-column-toggle, .analytics-chart-toggle, .analytics-help-toggle),
  #dashboardContent.analytics-table-scope #group_by {
    min-height: 32px !important;
    height: auto !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #dashboardContent.analytics-table-scope .analytics-table-top-scrollbar {
    height: 24px !important;
    padding: 4px 6px !important;
  }

  #dashboardContent.analytics-table-scope .analytics-table-top-scrollbar-track {
    height: 16px !important;
  }

  /* Keep mobile editing legible and avoid browser zoom when focusing a field. */
  @media (max-width: 767px) {
    :where(table:has(th), table.wf-data-table):not([role="presentation"], [role="none"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select, textarea) {
      font-size: 16px !important;
    }
  }
}

/* Analytics tables use the available desktop width, including admin reports. */
.wf-redesign-page .wrap:has(#dashboardContent.analytics-table-scope) {
  --max: 100%;
}