/* Scope to the customer directory, including its empty search state. */
@media (max-width: 767px) {
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) {
    min-width: 0;
    width: 100%;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) > div:has(> .ak-stat-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-stat-card {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 12px; padding: 16px;
    min-width: 0; min-height: 148px; height: auto;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-stat-icon {
    width: 36px; height: 36px; flex: 0 0 36px; font-size: 18px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-stat-body {
    min-width: 0; width: 100%;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-stat-value {
    display: block; font-size: clamp(17px, 4.5vw, 24px); line-height: 1.25;
    white-space: nowrap; word-break: normal; overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-stat-label {
    display: block; margin-top: 6px; font-size: 12px; line-height: 1.45;
    white-space: normal; word-break: normal; overflow-wrap: normal; color: #bfc3cb;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-toolbar > div {
    flex: 1 1 100%; min-width: 0;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-search-input {
    width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font-size: 16px; box-sizing: border-box;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) > .ak-card {
    background: transparent; border: 0; overflow: visible; box-shadow: none;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table-wrap {
    overflow: visible; max-width: 100%;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table {
    display: block; width: 100%; min-width: 0 !important; table-layout: auto;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table thead {
    display: block; background: transparent; margin-bottom: 14px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table thead::before {
    content: "Sort customers by"; display: block; margin: 8px 0; color: #bfc3cb; font-size: 12px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table thead tr {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table th {
    display: block; padding: 0; border: 0; background: transparent;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table th:not(:has(button)) {
    position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table th button {
    min-height: 44px; padding: 10px 12px; border: 1px solid #42454d !important;
    border-radius: 8px; font-size: 12px; text-transform: none; color: #e9eaf0 !important;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody {
    display: grid; gap: 14px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px; padding: 16px; background: #191919; border: 1px solid #353535; border-radius: 14px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td {
    display: block; min-width: 0; padding: 12px 0; border: 0;
    border-bottom: 1px solid #303033; white-space: normal !important;
    overflow-wrap: anywhere; color: #e7e9ee; font-size: 14px !important;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td::before {
    display: block; color: #bfc3cb; font-size: 11px; line-height: 1.4; margin-bottom: 6px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(1),
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(2),
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:last-child {
    grid-column: 1 / -1;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:first-child {
    padding-top: 0;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:first-child > div > div:last-child {
    min-width: 0;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(2)::before { content: "Contact"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(3)::before { content: "Orders"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(4)::before { content: "Total spent"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(5)::before { content: "Refunds"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(6)::before { content: "Last order"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:nth-child(7)::before { content: "Member since"; }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-table tbody td:last-child {
    border: 0; padding-bottom: 0;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) a[title="View customer"] {
    display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px;
    width: 100%; border: 1px solid #555; border-radius: 8px; color: #fff; box-sizing: border-box;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) a[title="View customer"]::after {
    content: "View customer"; font-size: 13px; font-weight: 600;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-pagination {
    display: flex; flex-direction: column; gap: 14px; align-items: stretch; padding: 16px 0;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-pagination-controls {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .ak-content > div:has(> .ak-toolbar input[placeholder="Search name, email, phone…"]) .ak-page-btn {
    min-width: 44px; min-height: 44px;
  }
}