@scope (.customers-table) {
  @media (width < 48rem) {
    :scope {
      display: block;
      width: 100%;
      border: none;
    }

    thead {
      display: none; /* Hide header row on mobile */
    }

    tbody {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      padding: var(--space-xs); /* Slight breathing room for shadows */
    }

    tr {
      display: grid;
      grid-template-areas:
        "name"
        "cpf"
        "phone"
        "actions";
      grid-template-columns: 1fr;
      gap: var(--space-sm);
      padding: var(--space-lg);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

      &:hover {
        background: var(--color-surface); /* override default hover highlight */
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
      }

      &:active {
        transform: scale(0.995);
      }
    }

    /* Column 1: Customer Name */
    td:nth-child(1) {
      grid-area: name;
      padding: 0;
      border: none;
      font-size: var(--text-heading-6);
      font-weight: var(--font-semibold);
      color: var(--color-text-heading);

      a {
        color: var(--color-text-heading);
        text-decoration: none;

        &:hover {
          color: var(--color-primary);
          text-decoration: none;
        }
      }
    }

    /* Column 2: CPF/CNPJ */
    td:nth-child(2) {
      grid-area: cpf;
      padding: 0;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--text-body-sm);
      color: var(--color-text-secondary);

      &::before {
        content: "CPF/CNPJ:";
        font-weight: var(--font-medium);
        color: var(--color-text-muted);
        min-width: 80px; /* Aligns values vertically */
      }
    }

    /* Column 3: Primary Phone */
    td:nth-child(3) {
      grid-area: phone;
      padding: 0;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--text-body-sm);
      color: var(--color-text-secondary);

      &::before {
        content: "Telefone:";
        font-weight: var(--font-medium);
        color: var(--color-text-muted);
        min-width: 80px; /* Aligns values vertically with CPF/CNPJ label */
      }
    }

    /* Column 4: Actions (Edit / Remove) */
    td:nth-child(4) {
      grid-area: actions;
      padding: 0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-xs);
      margin-top: var(--space-xs); /* Subtle visual break before action row */
      border-top: 1px dashed var(--color-border-muted);
      padding-top: var(--space-sm);

      .button {
        padding: var(--space-xs) var(--space-md);
      }

      /* Make sure delete button form stays inline */
      form {
        display: inline-flex;
      }
    }
  }
}