/* Native data tables keep their real cells and handlers. admin-ui adds labels from column headings. */
@media (max-width: 767px) {
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-scroll, .cms-saas-table-scroll, .cms-customer-table-scroll) {
    width: 100%; min-width: 0; max-width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent;
  }
  body.cms-admin.cms-metrix #cms-screen table:is(.cms-orders-table, .cms-saas-deals-table, .cms-customer-table) {
    display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; border: 0; background: transparent;
  }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > colgroup { display: none; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > tbody { display: grid; gap: 14px; width: 100%; min-width: 0; }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 16px;
    width: 100%; min-width: 0; margin: 0; padding: 16px; border: 1px solid #e6e9f2; border-radius: 12px; background: #fff;
  }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > tbody > tr > td {
    display: grid; align-content: start; gap: 5px; width: auto; min-width: 0; max-width: 100%; height: auto;
    margin: 0; padding: 0; border: 0; background: transparent; white-space: normal; text-align: left; overflow-wrap: anywhere;
    font-size: 13px; line-height: 20px;
  }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; color: #6e7079; font-size: 11px; font-weight: 400; line-height: 17px;
  }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > tbody > tr > td[colspan] { grid-column: 1 / -1; }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-orders-table, .cms-saas-deals-table) > tbody > tr > td[colspan]::before { display: none; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table > tbody > tr > td:first-child { grid-column: 1 / -1; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table > tbody > tr > td:last-child { grid-column: 1 / -1; display: block; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table :is(.cms-saas-row-menu, .cms-customer-table-actions) { width: auto; max-width: 100%; }
  body.cms-admin.cms-metrix #cms-screen .cms-customer-table-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  body.cms-admin.cms-metrix #cms-screen .cms-customer-table-name { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; line-height: 22px; }
  body.cms-admin.cms-metrix #cms-screen :is(.cms-customer-table-phone, .cms-customer-table-email) { white-space: normal; overflow: visible; text-overflow: clip; }
  body.cms-admin.cms-metrix #cms-screen .cms-customer-table td:nth-child(6) { grid-column: 1 / -1; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table :is(button, .cms-button, .cms-icon-button, .cms-actions-trigger) { min-width: 44px; min-height: 44px; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deals-table > tbody > tr > td:last-child::before { display: none; }

  /* Existing order sort controls remain visible as a wrapping toolbar above the cards. */
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > thead { display: block; margin-bottom: 14px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > thead > tr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > thead th { display: none; width: auto; height: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > thead th:has(.cms-orders-sort),
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > thead .cms-orders-selection-heading { display: block; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table .cms-orders-sort { min-height: 44px; padding: 8px 10px; border: 1px solid #e5e8f1; border-radius: 8px; background: #f8f9fc; font-size: 12px; line-height: 20px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table th[aria-sort]:not([aria-sort="none"]) .cms-orders-sort { border-color: #c5cdf7; background: #eef0fc; color: #4b60d2; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > tbody > tr > .cms-orders-customer-cell { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > tbody > tr > td:is(:nth-child(3),:nth-child(4),:nth-child(5)) { white-space: normal; overflow-wrap: anywhere; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > tbody > tr:has(.cms-orders-selection-cell) > .cms-orders-customer-cell { grid-row: 1; padding-right: 48px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table > tbody > tr > .cms-orders-selection-cell { grid-column: 2; grid-row: 1; justify-self: end; width: 44px; padding: 0; z-index: 1; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table .cms-orders-selection-cell::before { display: none; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table .cms-orders-customer { min-height: 44px; padding: 0; font-size: 14px; line-height: 22px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table td:has(.cms-orders-status),
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table td:has(.cms-orders-open) { grid-column: 1 / -1; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table td:has(.cms-orders-open)::before { display: none; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table .cms-orders-open { justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-table .cms-orders-empty { height: auto; min-height: 80px; padding: 16px; }
  body.cms-admin.cms-metrix #cms-screen .cms-orders-status { justify-self: start; max-width: 100%; white-space: normal; }

  /* The pipeline intentionally scrolls across stages; each stage exposes its complete card actions. */
  body.cms-admin.cms-metrix #cms-screen .cms-saas-kanban { grid-auto-columns: minmax(0, calc(100% - 24px)); scroll-snap-type: x proximity; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-kanban > .cms-kanban-column { scroll-snap-align: start; }
  body.cms-admin.cms-metrix #cms-screen .cms-saas-deal-footer > .cms-saas-deal-details { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 10px; }
}
/* Save/history controls wrap as one shared action group on narrow editor pages. */
@media (max-width: 767px) {
  body.cms-admin.cms-metrix #cms-screen .cms-inline-savebar { flex-wrap: wrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
  body.cms-admin.cms-metrix #cms-screen .cms-inline-savebar > :is(.cms-button, .cms-inline-save-control) { flex: 1 1 140px; width: auto; min-width: 0; max-width: 100%; min-height: 44px; height: auto; max-height: none; white-space: normal; overflow-wrap: anywhere; }
  body.cms-admin.cms-metrix #cms-screen .cms-inline-savebar > :is(.cms-save-state, .cms-design-savebar-copy, .cms-inline-save-status) { flex: 1 0 100%; width: 100%; margin: 0 !important; text-align: left; }
}